web-dev-qa-db-fra.com

Puis-je animer un élément de positionnement absolu avec une transition CSS?

Je souhaite animer le changement de position d'un élément avec la transition CSS, mais cela ne fonctionne pas, même si j'utilise la transition sur les propriétés all, comme dans l'exemple suivant: http://jsfiddle.net/yFy5n/3/

Cependant, je ne souhaite pas que ma solution finale applique la transition à toutes les propriétés, mais uniquement au changement de position. Donc, le changement de couleur doit être instantané, seul le changement de position de gauche à droite doit être animé (l'inverse de ce qui se passe maintenant). 

csscss-transitions
35
Digital Ninja

Vous avez oublié de définir la valeur par défaut pour left afin qu'il ne sache pas comment animer.

.test {
    left: 0;
    transition:left 1s linear;
}

Voir ici: http://jsfiddle.net/shomz/yFy5n/5/

60
Shomz

Veuillez essayer ce code margin-left:60px au lieu de left:60px

s'il vous plaît jeter un oeil: http://jsfiddle.net/hbirjand/2LtBh/2/

comme @Shomz l'a dit, la transition doit être changée en transition:margin 1s linear; au lieu de transition:all 1s linear;

5
Hbirjand

essaye ça:

.test {
    position:absolute;
    background:blue;
    width:200px;
    height:200px;
    top:40px;
    transition:left 1s linear;
    left: 0;
}
0
qbit