CSS transition entre la gauche -> droite et de haut -> bas

Question

CSS transition entre la gauche -> droite et de haut -> bas

est-il possible d'utiliser des transitions CSS pour animer quelque chose entre un ensemble de positions comme left: 0pxright: 0px donc il va tout le chemin à travers l'écran? J'ai besoin d'accomplir la même chose de haut en bas. Est-ce que je suis coincé à 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-je utiliser du jQuery .addClass

38

css-transitions css3

demandé sur Volker E. 2012-04-20 17:30:55

3 réponses

score 22 · Answer 1

si vous connaissez la largeur/hauteur de l'élément animé, vous pouvez animer la position (Haut, Bas, Gauche, Droite) et ensuite 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 ensuite 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 facile avec transform: translate(x,y) mais je vais le garder comme ça pour que ce soit plus compréhensible.

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

score 11 · Answer 2

Cela a fonctionné pour moi sur Chrome. Le % pour translate est en référence à la taille de la boîte de limite de l'élément auquel il est appliqué de sorte qu'il obtient parfaitement l'élément au bord inférieur droit tout en n'ayant pas à changer quelle propriété est utilisée pour spécifier son emplacement.

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

score 3 · Answer 3

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

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

Las etiquetas más populares

CSS transition entre la gauche -> droite et de haut -> bas

3 réponses