CSS Geçişi üst, alt, sol, sağ ile çalışmaz

Stil sahibi bir unsurum var

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

Sonra üzerine tıkladıktan sonra konumunu sorunsuz bir şekilde değiştirmek istiyorum, ancak stil değişikliğini eklediğimde geçiş gerçekleşmiyor, bunun yerine öğe anında hareket ediyor.

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

Ancak color, örneğin özelliği değiştirirsem, sorunsuz bir şekilde değişir.

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

Bunun nedeni ne olabilir? 'Geçişli' olmayan özellikler var mı?

DÜZENLEME : Sanırım bunun jQuery olmadığını söylemeliydim, bu başka bir kitaplık. Kod amaçlandığı gibi çalışıyor gibi görünüyor, stiller ekleniyor, ancak geçiş yalnızca ikinci durumda mı çalışıyor?

Css'de varsayılan bir değer ayarlamayı deneyin (nereden başlamasını istediğinizi bildirmek için)

CSS

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

Belki de nasıl canlandırılır ne değer bilecek böylece, sizin css kural kümesinde bir üst değeri belirtmek gerekir dan .

Benim durumumda div pozisyonu düzeltildi, sol pozisyon eklemek yeterli değildi, sadece ekran bloğu ekledikten sonra çalışmaya başladı

left:0; display:block;

OP ile alakalı olmayan, ancak gelecekte başka biri için geçerli olan bir şey:

Pikseller ( px) için, değer "0" ise, birim ihmal edilebilir: right: 0ve right: 0pxher ikisi de çalışır.

Ancak Firefox ve Chrome'da bunun saniye birimi ( ) için geçerli olmadığını fark ettim s. İken transition: right 1s ease 0seserler transition: right 1s ease 0(birimini eksik sson değeri transition-delayyok) değil (o does ancak Edge işi).

Aşağıdaki örnekte, göreceksiniz righther ikisi için çalışmalarını 0pxve 0fakat transitionsadece çalışır 0sve çalışmaz 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>

'Geçişli' olmayan özellikler var mı?

Cevap: Evet .

Mülk burada listelenmemişse , 'geçişli' değildir .

Referans: Animatable CSS Özellikleri

Bugün bu sorunla karşılaştım. İşte benim hacky çözümüm.

Yüklenirken 100 piksel yukarı geçiş yapmak için sabit bir konum öğesine ihtiyacım vardı.

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