La transición CSS no funciona con la parte superior, inferior, izquierda, derecha

91

Tengo un elemento con estilo

position: relative;
transition: all 2s ease 0s;

Luego, quiero cambiar su posición sin problemas después de hacer clic en él, pero cuando agrego el cambio de estilo, la transición no tiene lugar, sino que el elemento se mueve instantáneamente.

$$('.omre')[0].on('click',function(){
    $$(this).style({top:'200px'});
});

Sin embargo, si cambio la colorpropiedad, por ejemplo, cambia sin problemas.

$$('.omre')[0].on('click',function(){
    $$(this).style({color:'red'});
});

¿Cuál podría ser la causa de esto? ¿Hay propiedades que no sean 'transitorias'?

EDITAR : Supongo que debería haber mencionado que esto no es jQuery, es otra biblioteca. El código parece funcionar según lo previsto, se están agregando estilos, pero ¿la transición solo funciona en el segundo caso?

php_nub_qq
fuente
2
Suponiendo que $$ es un alias para jQuery, hacer [0] devolverá un objeto dom nativo (a diferencia de un objeto jquery) y no tendrá ningún .on()método. Si no, ¿qué es $$?
xec
Nada de eso es válido, si está usando jQuery, no hay nada llamado style (), y en JS nativo, seguramente no funciona así.
Adeneo
1
Hay un conjunto de reglas que se pueden transitar. ver Especificación W3
Goldentoa11
@ Goldentoa11 topparece estar en la lista, lo que elimina mis dudas sobre topno estar disponible para las transiciones.
php_nub_qq
3
@php_nub_qq Verifique la respuesta de adaneo y mi comentario, por lo que parece, debe comenzar con un topvalor establecido (a 0, por ejemplo) antes de cambiarlo (a 200 o lo que sea)
xec

Respuestas:

191

Intente establecer un valor predeterminado en el css (para que sepa dónde desea que comience)

CSS

position: relative;
transition: all 2s ease 0s;
top: 0; /* start out at position 0 */
xec
fuente
11
o solo transition: top 1s ease 0s;portop
Oleg Abrazhaev
16

Tal vez es necesario especificar un valor superior en su conjunto de reglas CSS, de modo que sabrá qué valor para animar a .

Sarahholden
fuente
2

En mi caso, la posición div fue fija, agregar la posición izquierda no fue suficiente, comenzó a funcionar solo después de agregar el bloque de visualización

left:0; display:block;

Sameh
fuente
2

Algo que no es relevante para el OP, pero tal vez para otra persona en el futuro:

Para píxeles ( px), si el valor es "0", la unidad se puede omitir: right: 0yright: 0px ambos funcionan.

Sin embargo, noté que en Firefox y Chrome este no es el caso de la unidad de segundos ( s). Si bien transition: right 1s ease 0sfunciona, transition: right 1s ease 0(unidad faltante spara el último valor transition-delay) no (lo hace funciona en Edge).

En el siguiente ejemplo, verá que rightfunciona para ambos 0pxy 0, pero transitionsolo funciona para 0sy no funciona con 0.

#box {
    border: 1px solid black;
    height: 240px;
    width: 260px;
    margin: 50px;
    position: relative;
}
.jump {
    position: absolute;
    width: 200px;
    height: 50px;
    color: white;
    padding: 5px;
}
#jump1 {
    background-color: maroon;
    top: 0px;
    right: 0px;
    transition: right 1s ease 0s;
}
#jump2 {
    background-color: green;
    top: 60px;
    right: 0;
    transition: right 1s ease 0s;
}
#jump3 {
    background-color: blue;
    top: 120px;
    right: 0px;
    transition: right 1s ease 0;
}
#jump4 {
    background-color: gray;
    top: 180px;
    right: 0;
    transition: right 1s ease 0;
}
#box:hover .jump {
    right: 50px;
}
<div id="box">
  <div class="jump" id="jump1">right: 0px<br>transition: right 1s ease 0s</div>
  <div class="jump" id="jump2">right: 0<br>transition: right 1s ease 0s</div>
  <div class="jump" id="jump3">right: 0px<br>transition: right 1s ease 0</div>
  <div class="jump" id="jump4">right: 0<br>transition: right 1s ease 0</div>
</div>

LWChris
fuente
-1

Hoy me encontré con este problema. Aquí está mi solución hacky.

Necesitaba un elemento de posición fija para hacer una transición de 100 píxeles a medida que se cargaba.

var delay = (ms) => new Promise(res => setTimeout(res, ms));
async function animateView(startPosition,elm){
  for(var i=0; i<101; i++){
    elm.style.top = `${(startPosition-i)}px`;
    await delay(1);
  }
}
Andre Bradshaw
fuente