CSS-Übergang 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 nach dem Anklicken fließend ändern, aber wenn ich die Stiländerung hinzufüge, findet der Übergang nicht statt, stattdessen bewegt sich das Element sofort.

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

Wenn ich jedoch die ändere color Eigenschaft, zum Beispiel, es ändert sich reibungslos.

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

Was könnte die Ursache dafür sein? Gibt es Eigenschaften, die nicht „übergangsweise“ sind?

BEARBEITEN: 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 für festzulegen top im CSS, um ihm mitzuteilen, wo er vor dem Übergang beginnen soll:

CSS

position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */

Der Grund dafür ist, dass Sie nicht von einem Schlüsselwort wechseln können, und der Standardwert für top ist auto.

Es ist auch eine gute Übung, Geben Sie genau an, was Sie überführen möchten (nur top Anstatt von all) sowohl aus Leistungsgründen als auch, damit Sie nichts anderes (wie color) unbeabsichtigt.

Vielleicht müssen Sie in Ihrem CSS-Regelsatz einen Höchstwert angeben, damit er weiß, welcher Wert animiert werden soll aus.

In meinem Fall war die div-Position behoben, das Hinzufügen der linken Position war nicht genug, es begann erst nach dem Hinzufügen des Anzeigeblocks zu funktionieren

left:0;
display:block;

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

Für Pixel (px), wenn der Wert “0” ist, kann die Einheit weggelassen werden: right: 0 und right: 0px beide arbeiten.

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

Im folgenden Beispiel sehen Sie das right funktioniert für beide 0px und 0aber transition funktioniert nur für 0s und es geht nicht mit 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 „übergangsweise“ sind?

Antworten: Ja.

Wenn die Immobilie nicht aufgeführt ist hier es ist nicht ‘Übergang’.

Bezug: Animierbare CSS-Eigenschaften