web-dev-qa-db-fra.com

Transition CSS entre les positions gauche -> droite et supérieure -> inférieure

Est-il possible d'utiliser des transitions CSS pour animer quelque chose entre une position définie en tant que left: 0px à right: 0px donc ça traverse tout l'écran? Je dois accomplir la même chose avec le haut en bas. Suis-je bloqué à calculer la largeur de l'écran/la taille de l'objet?

#nav {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    -webkit-transition: all 0.5s ease-out;
}

.moveto {
    top: 0px;
    right: 0px;
}

puis j'utilise jQuery's .addClass

css3css-transitions
41
grep

Si vous connaissez la largeur/hauteur de l'élément animé, vous pouvez animer la position (haut, bas, gauche, droite) puis soustraire la marge correspondante.

​.animate {
  height: 100px;
  width: 100px;
  background-color: #c00;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  position: absolute;
  left: 0; /*or bottom, top, right*/
}

Et puis animer en fonction de la position ...

.animate.move {
  left: 100%;   /*or bottom, top, right*/
  margin-left: -100px; /*or bottom, top, right */
}

Cette implémentation serait probablement plus fluide avec transform: translate(x,y), mais je la garderai comme ceci pour la rendre plus compréhensible.

démo: http://jsfiddle.net/nKtC6/

25
methodofaction

Cela a fonctionné pour moi sur le chrome. Le% pour traduire est en référence à la taille du cadre de sélection de l'élément auquel il est appliqué. Ainsi, l'élément est parfaitement placé dans le bord inférieur droit sans qu'il soit nécessaire de changer la propriété utilisée pour spécifier son emplacement.

topleft {
  top: 0%;
  left: 0%;
}
bottomright {
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%,-100%);
}
11
teknotus

Dans les navigateurs plus modernes (y compris IE 10+), vous pouvez maintenant utiliser calc() :

.moveto {
  top: 0px;
  left: calc(100% - 50px);
}
3
candu