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.
css
webkit
css-transitions
shorthand
Gregory Bolkenstijn
la source
la source
.5s
valeurs doubles sont-ellesopacity
prévues?Réponses:
Syntaxe:
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:
Ou transformez-les tous:
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
la source
all
au lieu de répertorier les propriétés spécifiques? Par exemple, si je prévois de faire la transitionbackground
etcolor
seulement - est-ce que je ferais mieux de spécifier les deux, ou simplement d'utiliserall
? 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 lesms-transition:
directives?ms-transition
, je ne connais aucune raison, maintenant qu'IE10 est sorti, pourquoi quelqu'un utiliserait-il toujoursms-transition
au lieu de la normetransition
. 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.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):La deuxième déclaration remplace la
all
dans la déclaration abrégée au-dessus d'elle et rend (occasionnellement) un code plus concis.Démo
la source
transition-property
substitution, mais aussi parce que, par exemple,transition-delay
doit être spécifié après la sténographie (au moins dans le webkit). En d'autres termes, la sténographie implique untransition-delay
de 0 et un retard autonome avant que la sténographie ne latransition: [props] [duration] [easing] [delay]
dans tous les navigateurs modernesJe travaille avec ceci:
la source
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.
la source
Cela m'a aidé à comprendre / rationaliser, uniquement ce dont j'avais besoin pour animer:
~ Ceci s'applique à toutes les propriétés de transition (durée, fonction de synchronisation de transition, etc.) au sein de la classe '.base'
la source
Je pense que cela fonctionne avec ceci:
la source