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 color
beispielsweise 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?
javascript
css
transition
php_nub_qq
quelle
quelle
.on()
Methode. Wenn nicht - was ist $$?top
erscheint in der Liste zu sein, die über meine Zweifel beseitigttop
nicht verfügbar ist für Übergänge.top
Wert beginnen (zum Beispiel auf 0), bevor Sie ihn ändern (auf 200 oder was auch immer)Antworten:
Versuchen Sie, einen Standardwert im CSS festzulegen (um zu erfahren, wo es beginnen soll).
CSS
quelle
transition: top 1s ease 0s;
fürtop
Vielleicht brauchen Sie einen Top-Wert in Ihrem CSS - Regelsatz festlegen, so dass sie wissen, was Wert zu belebter aus .
quelle
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;
quelle
Etwas, das für das OP nicht relevant ist, aber vielleicht für jemand anderen in der Zukunft:
px
Wenn der Wert für pixels ( ) "0" ist, kann die Einheit weggelassen werden:right: 0
undright: 0px
beide funktionieren.Ich habe jedoch festgestellt, dass dies in Firefox und Chrome für die Sekundeneinheit ( ) nicht der Fall ist
s
. Währendtransition: right 1s ease 0s
Arbeitentransition: right 1s ease 0
(Einheit fehlens
für letzten Werttransition-delay
) sind nicht (es tut Arbeit in Rande jedoch).Im folgenden Beispiel sehen Sie, dass dies
right
für beide0px
und funktioniert0
, abertransition
nur für0s
und nicht0
.quelle
Antwort: Ja .
Wenn die Immobilie hier nicht aufgeführt ist, handelt es sich nicht um eine Übergangsimmobilie .
Referenz: Animierbare CSS-Eigenschaften
quelle
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.
quelle