Pourquoi ma transition CSS3 échoue-t-elle lorsque je modifie la propriété d'affichage ?

La transition CSS3 ne fonctionne pas avec la propriété Display

Question :

Pourquoi la transition CSS3 ne fonctionne-t-elle pas lorsque la propriété display est modifié ?

Réponse :

Lorsque la propriété d'affichage est définie sur "aucun", l'élément de bloc entier est effectivement masqué, empêchant tout effet de transition. Alternativement, l'utilisation de l'opacité permet des effets de fondu et des transitions plus douces.

Solution CSS alternative :

Pour obtenir un effet de transition fluide, manipulez les propriétés d'opacité, de hauteur et de remplissage. à la place :

#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;
}

#header #button > .content {
  opacity: 0;
  height: 0;
  padding: 0 8px;
  overflow: hidden;
  transition: all .3s ease .15s;
}

Démo de travail :

[Fiddle](https://jsfiddle.net/alexdocker/KAyvL/)

Remarques supplémentaires :

• Les préfixes des fournisseurs ont été omis par souci de concision.
• Vous pouvez également envisager d'ajuster le rayon de la bordure pour créer un effet de transition plus subtil.
• Référez-vous à cette [discussion SO](https://stackoverflow.com/questions/13691003/displaynone-css3-transition) pour des informations similaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!