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

90

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?

php_nub_qq
quelle
2
Angenommen, $$ ist ein Alias ​​für jQuery. Wenn Sie [0] ausführen, wird ein natives dom-Objekt (im Gegensatz zu einem jquery-Objekt) zurückgegeben und es gibt keine .on()Methode. Wenn nicht - was ist $$?
xec
Nichts davon ist gültig, wenn Sie jQuery verwenden, gibt es nichts, was als style () bezeichnet wird, und in nativem JS funktioniert es sicherlich nicht so.
Adeneo
1
Es gibt eine Reihe von Regeln, die übergangsfähig sind. siehe W3-Spezifikation
Goldentoa11
@ Goldentoa11 toperscheint in der Liste zu sein, die über meine Zweifel beseitigt topnicht verfügbar ist für Übergänge.
php_nub_qq
3
@php_nub_qq Überprüfen Sie die Antwort von adaneo und meinen Kommentar dazu. Wie es aussieht, müssen Sie mit einem topWert beginnen (zum Beispiel auf 0), bevor Sie ihn ändern (auf 200 oder was auch immer)
xec

Antworten:

187

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 */
xec
quelle
9
oder nur transition: top 1s ease 0s;fürtop
Oleg Abrazhaev
16

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

sarahholden
quelle
2

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;

Sameh
quelle
2

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>

LWChris
quelle
0

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);
  }
}
Andre Bradshaw
quelle