web-dev-qa-db-fra.com

Transition CSS de `display: none` lors d'un changement de classe?

J'ai commencé à utiliser des transitions pour "moderniser" la sensation d'un site. Jusque là, :hover les transitions fonctionnent très bien. Maintenant, je me demande s'il est possible de déclencher une transition basée sur d'autres choses, comme quand une classe change.

Voici le CSS pertinent:

#myelem {
    opacity: 0;
    display: none;
    transition: opacity 0.4s ease-in, display 0.4s step-end;
    -ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
    -moz-transition: opacity 0.4s ease-in, display 0.4s step-end;
    -webkit-transition: opacity 0.4s ease-in, display 0.4s step-end;
}
#myelem.show {
    display: block;
    opacity: 1;
    transition: opacity 0.4s ease-out, display 0.4s step-start;
    -ms-transition: opacity 0.4s ease-out, display 0.4s step-start;
    -moz-transition: opacity 0.4s ease-out, display 0.4s step-start;
    -webkit-transition: opacity 0.4s ease-out, display 0.4s step-start;
}

Le JavaScript pour déclencher le changement est:

document.getElementById('myelem').className = "show";

Mais la transition ne semble pas se produire - elle ne fait que sauter d'un état à l'autre.

Qu'est-ce que je fais mal?

csscss-transitions
49
Niet the Dark Absol

Cela fonctionne lorsque vous supprimez les propriétés display.

#myelem {
    opacity: 0;
    transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
}
#myelem.show {
    opacity: 1;
    transition: opacity 0.4s ease-out;
    -ms-transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
}​

JSFiddle.

La raison en est que seules les propriétés CSS avec des nombres peuvent être transférées. Que pensez-vous que "l'état de 50%" devrait être compris entre "display: none;" et "display: block; "? Comme cela ne peut pas être calculé, vous ne pouvez pas animer la propriété display.

45
MarcoK

Vous ne pouvez pas utiliser la propriété display pour la transition entre les états.

7
Henrik

La réponse fournie par @MarcoK, y compris les commentaires, montre déjà la bonne direction. La définition de la propriété display empêche transition.
Une meilleure pratique est de mettre la version non préfixée (standards) après celle du navigateur-préfixée, afin d'être future- preuve. Ces dernières propriétés écrasent les premières.
Autres améliorations:

  • Comme l'a souligné @Charmander, -ms-transition n'est pris en charge par aucun Internet Explorer
  • Il y a aussi le fournisseur d'Opera préfixé -o-transition pour Op 10.5-12 & Op Mobile 10-12 , qui est actuellement pris en charge par moins de 0,1% du navigateur mondial. Je vais le dire pour l'achèvement

CSS:

#myelem {
    opacity: 0;
    -webkit-transition: opacity .4s ease-in;
       -moz-transition: opacity .4s ease-in;
         -o-transition: opacity .4s ease-in;
            transition: opacity .4s ease-in;
}
#myelem.show {
    opacity: 1;
    -webkit-transition: opacity .4s ease-out;
       -moz-transition: opacity .4s ease-out;
         -o-transition: opacity .4s ease-out;
            transition: opacity .4s ease-out;
}​
3
Volker E.

Il est possible d'animer des éléments d'affichage et de masquage en CSS, juste au lieu de:

display: none;

/* and */

display: block;

utilisation:

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;

Puisque vous remplacez ces propriétés, vous pouvez animer n'importe quelle valeur css avec transition.

exemple de travail: https://jsfiddle.net/utyja8qx/

1
Dariusz Sikorski