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

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?

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 */

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

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;

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>

¿Hay propiedades que no sean 'transitorias'?

Respuesta: si .

Si la propiedad no figura aquí, no es 'transitoria' .

Referencia: Propiedades CSS animables

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);
  }
}