CSS Transition non funziona con top, bottom, left, right

Ho un elemento con stile

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

Quindi voglio cambiare la sua posizione senza problemi dopo aver fatto clic su di esso, ma quando aggiungo il cambio di stile la transizione non avviene, invece l'elemento si muove istantaneamente.

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

Tuttavia, se cambio la colorproprietà, ad esempio, cambia senza problemi.

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

Quale potrebbe essere la causa di ciò? Esistono proprietà che non sono "di transizione"?

EDIT : immagino che avrei dovuto menzionare che questo non è jQuery, è un'altra libreria. Il codice sembra funzionare come previsto, gli stili vengono aggiunti, ma la transizione funziona solo nel secondo caso?

Prova a impostare un valore predefinito nel css (per fargli sapere dove vuoi che inizi)

CSS

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

Forse è necessario specificare un valore superiore nella regola CSS insieme, in modo che si sa quale valore di animare da .

Nel mio caso la posizione div è stata corretta, l'aggiunta della posizione sinistra non era sufficiente e ha iniziato a funzionare solo dopo aver aggiunto il blocco di visualizzazione

left:0; display:block;

Qualcosa che non è rilevante per l'OP, ma forse per qualcun altro in futuro:

Per i pixel ( px), se il valore è "0", l'unità può essere omessa: right: 0eright: 0px entrambi funzionano.

Tuttavia ho notato che in Firefox e Chrome questo non è il caso dell'unità dei secondi ( s). Mentre transition: right 1s ease 0sfunziona, transition: right 1s ease 0(unità mancante sper l'ultimo valore transition-delay) non lo fa (lo fa il lavoro in Bordo comunque).

Nell'esempio seguente, vedrai che rightfunziona per entrambi 0pxe 0, ma transitionfunziona solo per 0se non funziona 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>

Esistono proprietà che non sono "di transizione"?

Risposta: sì .

Se la proprietà non è elencata qui, non è "di transizione" .

Riferimento: proprietà CSS animabili

Oggi mi sono imbattuto in questo problema. Ecco la mia soluzione hacky.

Avevo bisogno di un elemento a posizione fissa per eseguire la transizione verso l'alto di 100 pixel durante il caricamento.

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