CSS Transition funktioniert nicht mit oben, unten, links, rechts

Ich habe ein Element mit Stil

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

Dann möchte ich seine Position reibungslos ändern, nachdem ich darauf geklickt habe, aber wenn ich die Stiländerung hinzufüge, findet der Übergang nicht statt, sondern das Element bewegt sich sofort.

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

Wenn ich jedoch colorbeispielsweise die Eigenschaft ändere , ändert sich dies reibungslos.

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

Was könnte die Ursache dafür sein? Gibt es Eigenschaften, die nicht "vorübergehend" sind?

EDIT : Ich denke, ich hätte erwähnen sollen, dass dies nicht jQuery ist, sondern eine andere Bibliothek. Der Code scheint wie beabsichtigt zu funktionieren, Stile werden hinzugefügt, aber der Übergang funktioniert nur im zweiten Fall?

Versuchen Sie, einen Standardwert im CSS festzulegen (um zu erfahren, wo es beginnen soll).

CSS

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

Vielleicht brauchen Sie einen Top-Wert in Ihrem CSS - Regelsatz festlegen, so dass sie wissen, was Wert zu belebter aus .

In meinem Fall war die Div-Position festgelegt. Das Hinzufügen der linken Position reichte nicht aus. Sie funktionierte erst nach dem Hinzufügen des Anzeigeblocks

left:0; display:block;

Etwas, das für das OP nicht relevant ist, aber vielleicht für jemand anderen in der Zukunft:

pxWenn der Wert für pixels ( ) "0" ist, kann die Einheit weggelassen werden: right: 0und right: 0pxbeide funktionieren.

Ich habe jedoch festgestellt, dass dies in Firefox und Chrome für die Sekundeneinheit ( ) nicht der Fall ist s. Während transition: right 1s ease 0sArbeiten transition: right 1s ease 0(Einheit fehlen sfür letzten Wert transition-delay) sind nicht (es tut Arbeit in Rande jedoch).

Im folgenden Beispiel sehen Sie, dass dies rightfür beide 0pxund funktioniert 0, aber transitionnur für 0sund nicht 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>

Gibt es Eigenschaften, die nicht "vorübergehend" sind?

Antwort: Ja .

Wenn die Immobilie hier nicht aufgeführt ist, handelt es sich nicht um eine Übergangsimmobilie .

Referenz: Animierbare CSS-Eigenschaften

Ich bin heute auf dieses Problem gestoßen. Hier ist meine hackige Lösung.

Ich brauchte ein Element mit fester Position, um beim Laden um 100 Pixel zu wechseln.

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