Raccourci de transition CSS avec plusieurs propriétés?

519

Je n'arrive pas à trouver la syntaxe correcte pour le raccourci de transition CSS avec plusieurs propriétés. Cela ne fait rien:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

J'ajoute la classe show avec javascript. L'élément devient plus haut et visible, il ne fait simplement pas de transition. Test dans les derniers Chrome, FF et Safari.

Qu'est-ce que je fais mal?

EDIT: Juste pour être clair, je cherche la version abrégée pour réduire mon CSS. Il est assez gonflé avec tous les préfixes des fournisseurs. Également développé l'exemple de code.

Gregory Bolkenstijn
la source
2
Consultez cette documentation. developer.mozilla.org/en/CSS/CSS_transitions
websymphony
3
Modifiez-vous réellement les valeurs de hauteur et d'opacité? Sinon, ils ne changent pas
yunzen
Je ne suis pas trop familier avec les transitions CSS - les .5svaleurs doubles sont-elles opacityprévues?
BoltClock
La documentation ne donne pas d'exemple d'utilisation de la version abrégée avec plusieurs propriétés. La hauteur passe de 0 à 200px, l'opacité de 0 à 1. Le deuxième 0,5 est un retard sur la transition d'opacité. Je veux qu'un élément croisse en hauteur, et quand cela sera terminé, il se
fondra dedans
2
Ah oui, la valeur du retard.
BoltClock

Réponses:

752

Syntaxe:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Notez que la durée doit précéder le délai, si celui-ci est spécifié.

Transitions individuelles combinées dans des déclarations abrégées:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

Ou transformez-les tous:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

Voici un exemple simple . En voici un autre avec la propriété delay .


Edit: précédemment répertoriés ici étaient les compatibilités et les problèmes connus concernant transition. Supprimé pour plus de lisibilité.

En bout de ligne: il suffit de l'utiliser. La nature de cette propriété est ininterrompue pour toutes les applications et la compatibilité est désormais bien supérieure à 94% dans le monde.

Si vous voulez toujours être sûr, reportez-vous à http://caniuse.com/css-transitions

Rémi Breton
la source
1
Avez-vous essayé cela? Ça ne marche pas pour moi. Je ne peux pas non plus utiliser la propriété all car j'ai un retard sur la deuxième propriété.
Gregory Bolkenstijn
3
Y a-t-il des implications en termes de performances / mémoire / autres à utiliser allau lieu de répertorier les propriétés spécifiques? Par exemple, si je prévois de faire la transition backgroundet colorseulement - est-ce que je ferais mieux de spécifier les deux, ou simplement d'utiliser all? De plus, étant donné qu'IE6-9 ne prend pas en charge les transitions et qu'IE10 les prend en charge sans préfixe, y a-t-il des avantages / inconvénients à inclure les ms-transition:directives?
mattstuehler
9
Il y a certainement un impact sur les performances lors de la transition de toutes les propriétés au lieu de simplement celle dont vous avez besoin. Cela peut causer de graves dommages si de nombreux éléments transforment toutes les propriétés en même temps. À propos ms-transition, je ne connais aucune raison, maintenant qu'IE10 est sorti, pourquoi quelqu'un utiliserait-il toujours ms-transitionau lieu de la norme transition. Cela ne causera aucun problème d'avoir les deux, mais il gonflera votre CSS, en particulier sur une feuille de style à forte transition. Plus important encore, la taille du fichier prendra également un coup.
Rémi Breton
3
J'ai eu le même problème et il est apparu que l'utilisation de "transition: opacity 1s .5s, max-height .5s 0" ne fonctionnait pas alors que "transition: opacity 1s .5s, max-height .5s 0s" l'était. Première fois que je vois une unité requise pour une valeur nulle en CSS!
mlarcher
5
Il convient de souligner que l'utilisation de «tous» est plus lente que la spécification de propriétés spécifiques.
Nathan
433

Si vous avez plusieurs propriétés spécifiques que vous souhaitez faire transiter de la même manière (parce que vous avez également certaines propriétés que vous ne voulez pas spécifiquement transiter, par exemple opacity), une autre option consiste à faire quelque chose comme ça (préfixes omis par souci de concision):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

La deuxième déclaration remplace la alldans la déclaration abrégée au-dessus d'elle et rend (occasionnellement) un code plus concis.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}
<p>Hover box for demo</p>
<div class="box"></div>

Démo

Jason
la source
4
C'est utile! Non seulement à cause de la transition-propertysubstitution, mais aussi parce que, par exemple, transition-delaydoit être spécifié après la sténographie (au moins dans le webkit). En d'autres termes, la sténographie implique un transition-delayde 0 et un retard autonome avant que la sténographie ne la
remette
@duncanwilcox vous pouvez le faire transition: [props] [duration] [easing] [delay] dans tous les navigateurs modernes
Jason
9
Préférez BEAUCOUP plus que la réponse acceptée.
Erutan409
3
charmant! aime vraiment l'approche!
wasddd_
36

Je travaille avec ceci:

element{
   transition : height 3s ease-out, width 5s ease-in;
}
AhbapAldirmaz
la source
C'est ce que je cherchais - raccourci pour plusieurs propriétés. Merci!
Adam Moisa
2

En ayant le délai de 0,5 s lors de la transition de la propriété d'opacité, l'élément sera complètement transparent (et donc invisible) pendant toute la durée de sa transition. Donc, la seule chose que vous verrez réellement est le changement d'opacité. Vous obtiendrez donc le même effet que de laisser la propriété height hors de la transition:

"transition: opacity .5s .5s;"

C'est ce que tu veux? Sinon, et vous souhaitez voir la transition de hauteur, vous ne pouvez pas avoir une opacité de zéro pendant tout le temps de la transition.

JB
la source
Cela ne fonctionne pas non plus, car la hauteur restera 0 pendant la transition de l'opacité.
Xesau
0

Cela m'a aidé à comprendre / rationaliser, uniquement ce dont j'avais besoin pour animer:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ Ceci s'applique à toutes les propriétés de transition (durée, fonction de synchronisation de transition, etc.) au sein de la classe '.base'

gav_aus_web
la source
-4

Je pense que cela fonctionne avec ceci:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
Thomas Lamothe
la source