web-dev-qa-db-fra.com

La transition CSS ne fonctionne pas avec haut, bas, gauche, droite

J'ai un élément avec style

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

Ensuite, je souhaite changer de position en douceur après avoir cliqué dessus, mais lorsque j'ajoute le changement de style, la transition n'a pas lieu, l'élément se déplace instantanément.

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

Cependant, si je change la propriété color par exemple, cela change sans heurts.

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

Quelle pourrait en être la cause? Existe-t-il des propriétés qui ne sont pas "transitoires"?

EDIT : Je suppose que j'aurais dû mentionner que ce n'est pas jQuery, c'est une autre bibliothèque. Le code semble fonctionner comme prévu, les styles sont ajoutés, mais la transition ne fonctionne que dans le second cas?

javascriptcsstransition
72
php_nub_qq

Essayez de définir une valeur par défaut dans le fichier css (pour lui indiquer où vous voulez commencer)

CSS

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

Peut-être devez-vous spécifier une valeur supérieure dans votre jeu de règles css, afin qu'il sache quelle valeur animer from.

15
sarahholden

Dans mon cas, la position div a été corrigée, l'ajout de la position gauche ne suffisait pas, il a commencé à fonctionner uniquement après l'ajout du bloc d'affichage.

left:0; display:block;

0
Sameh