javascript - top - CSS Transition no funciona con arriba, abajo, izquierda, derecha

transition opacity css

Question

Tengo un elemento con estilo

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

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

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

Sin embargo, si cambio la propiedad del color , 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 son de "transición"?

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

Answer 1

Intenta establecer un valor predeterminado en el CSS (para que sepa dónde quieres que comience)

CSS

position: relative;
transition: all 2s ease 0s;
top: 0; /* start out at position 0 */

Answer 2

Quizás necesite especificar un valor superior en su conjunto de reglas CSS, para que sepa de qué valor se debe animar.