A transição CSS não funciona com superior, inferior, esquerda, direita

Eu tenho um elemento com estilo

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

Então, quero mudar sua posição suavemente depois de clicar nele, mas quando adiciono a mudança de estilo, a transição não ocorre, em vez disso, o elemento se move instantaneamente.

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

No entanto, se eu alterar a colorpropriedade, por exemplo, ela muda suavemente.

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

Qual pode ser a causa disso? Existem propriedades que não são 'transitórias'?

EDIT : Eu acho que deveria ter mencionado que isso não é jQuery, é outra biblioteca. O código parece funcionar conforme o esperado, estilos estão sendo adicionados, mas a transição só funciona no segundo caso?

Tente definir um valor padrão no css (para deixá-lo saber onde você deseja que comece)

CSS

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

Talvez você precisa especificar um valor superior em seu conjunto de regras css, de modo que ele vai saber o valor a animar de .

No meu caso, a posição div foi corrigida, adicionar a posição à esquerda não foi suficiente, ela começou a funcionar apenas após adicionar o bloco de exibição

left:0; display:block;

Algo que não é relevante para o OP, mas talvez para outra pessoa no futuro:

Para pixels ( px), se o valor for "0", a unidade pode ser omitida: right: 0e right: 0pxambos funcionam.

No entanto, notei que no Firefox e no Chrome este não é o caso da unidade de segundos ( s). Enquanto transition: right 1s ease 0sfunciona, transition: right 1s ease 0(unidade ausente spara o último valor transition-delay) não (ele faz o trabalho na borda no entanto).

No exemplo a seguir, você verá que rightfunciona para ambos 0pxe 0, mas transitionsó funciona para 0se não funciona com 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>

Existem propriedades que não são 'transitórias'?

Resposta: sim .

Se a propriedade não estiver listada aqui, ela não é 'transitória' .

Referência: Propriedades de CSS Animatable

Corri para este problema hoje. Aqui está minha solução hacky.

Eu precisava de um elemento de posição fixa para fazer a transição de 100 pixels enquanto carregava.

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