web-dev-qa-db-fra.com

Transition CSS en abrégé avec plusieurs propriétés?

Je n'arrive pas à trouver la syntaxe correcte pour la transition CSS abrégé 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 pas la 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. C'est assez gonflé avec tous les préfixes du vendeur. Également développé l'exemple de code.

csscss3webkitcss-transitionsshorthand
452
Gregory Bolkenstijn

Syntaxe:

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

Notez que la durée doit précéder le délai, si ce dernier est spécifié.

Les 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 faites simplement une transition entre eux:

-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 n exemple simple . En voici un autre avec la propriété delay .

Éditez: étaient énumérés précédemment 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 permanente pour toutes les applications et la compatibilité dépasse largement 94% dans le monde.

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

672
Rémi Breton

Si vous souhaitez effectuer la transition de plusieurs propriétés spécifiques de la même manière (car vous avez également certaines propriétés que vous ne souhaitez pas -, par exemple, opacity), une autre option consiste à faire quelque chose comme ceci (préfixes omis pour des raisons de concision):

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

La deuxième déclaration remplace la all dans la déclaration abrégée qui la surmonte et crée un code (parfois) 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

387
Jason

Je travaille avec ça:

element{
   transition : height 3s ease-out, width 5s ease-in;
}
17
AhbapAldirmaz

En ayant le délai de .5s lors de la transition de la propriété opacity, l'élément sera complètement transparent (et donc invisible) tout le temps que sa hauteur sera en transition. Donc, la seule chose que vous verrez réellement est l'opacité qui change. Ainsi, vous obtiendrez le même effet que de laisser la propriété height en dehors de la transition:

"transition: opacité .5s .5s;"

Est-ce ce que vous voulez? Sinon, et si vous souhaitez voir la transition de hauteur, vous ne pouvez pas avoir une opacité de zéro pendant toute la durée de la transition.

2
J.B.