wake-up-neo.com

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

Ich habe ein Element mit Stil

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

Dann möchte ich die Position nach dem Klicken problemlos ändern, aber wenn ich die Stiländerung hinzufüge, findet der Übergang nicht statt, sondern das Element wird sofort verschoben.

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

Wenn ich jedoch zum Beispiel die Eigenschaft color ändere, ändert sie sich 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 hätte wohl erwähnen sollen, dass dies nicht jQuery ist, sondern eine andere Bibliothek. Der Code scheint wie vorgesehen zu funktionieren, Stile werden hinzugefügt, aber der Übergang funktioniert nur im zweiten Fall?

72
php_nub_qq

Versuchen Sie, in der CSS einen Standardwert festzulegen (damit Sie wissen, wo Sie anfangen möchten).

CSS

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

Möglicherweise müssen Sie einen Spitzenwert in Ihrem CSS-Regelsatz angeben, damit dieser weiß, welcher Wert animiert werden soll von.

15
sarahholden

In meinem Fall war die div-Position fest, das Hinzufügen der linken Position reichte nicht aus, es funktionierte erst nach dem Hinzufügen des Anzeigeblocks

left:0; display:block;

0
Sameh