Transisi CSS tidak bekerja dengan atas, bawah, kiri, kanan

Saya memiliki elemen dengan gaya

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

Kemudian saya ingin mengubah posisinya dengan mulus setelah mengkliknya, tetapi ketika saya menambahkan gaya, transisi tidak terjadi, melainkan elemen bergerak secara instan.

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

Namun jika saya mengubah colorproperti misalnya, itu berubah dengan mulus.

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

Apa yang mungkin menjadi penyebabnya? Apakah ada properti yang bukan 'transisi'?

EDIT : Saya kira saya harus menyebutkan bahwa ini bukan jQuery, ini perpustakaan lain. Kode tampaknya berfungsi sebagaimana mestinya, gaya ditambahkan, tetapi transisi hanya berfungsi dalam kasus kedua?

Coba tetapkan nilai default di css (untuk memberi tahu di mana Anda ingin memulai)

CSS

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

Mungkin Anda perlu menentukan nilai teratas di set aturan css Anda, sehingga akan tahu apa nilai bernyawa dari .

Dalam kasus saya, posisi div diperbaiki, menambahkan posisi kiri tidak cukup, itu mulai berfungsi hanya setelah menambahkan blok tampilan

left:0; display:block;

Sesuatu yang tidak relevan untuk OP, tetapi mungkin untuk orang lain di masa mendatang:

Untuk piksel ( px), jika nilainya adalah "0", unit dapat dihilangkan: right: 0dan right: 0pxkeduanya berfungsi.

Namun saya perhatikan bahwa di Firefox dan Chrome ini bukan kasus untuk unit detik ( s). Sementara transition: right 1s ease 0skarya, transition: right 1s ease 0(unit hilang suntuk nilai terakhir transition-delay) tidak tidak (hal itu tidak bekerja di Ujung namun).

Dalam contoh berikut, Anda akan melihat bahwa rightberfungsi untuk 0pxdan 0, tetapi transitionhanya berfungsi untuk 0sdan tidak berfungsi dengan 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>

Apakah ada properti yang bukan 'transisi'?

Jawaban: Ya .

Jika properti tidak terdaftar di sini, itu bukan 'transisi' .

Referensi: Properti CSS Beranimasi

Saya mengalami masalah ini hari ini. Inilah solusi hacky saya.

Saya membutuhkan elemen posisi tetap untuk bertransisi hingga 100 piksel saat dimuat.

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