Pourquoi la transition CSS3 ne fonctionne-t-elle pas avec la propriété Display ?

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

En CSS, la propriété display définit si un élément est affiché ou non. Lorsqu'un élément est défini sur display: none, il est supprimé du flux de documents, ce qui signifie qu'il ne prend pas de place et n'est pas visible. Cela rend impossible l'utilisation de transitions CSS pour animer l'apparition ou la disparition d'un élément avec display: none.

Pour obtenir un effet de fondu fluide pour un élément masqué, la propriété display ne doit pas être utilisée. Au lieu de cela, la propriété opacity peut être utilisée pour modifier la transparence de l'élément. Le code CSS suivant montre comment utiliser la propriété opacity pour créer un effet de fondu entrant :

#header #button:hover .content {
  opacity: 1;
  transition: opacity 0.3s ease 0.15s; /* Vendor prefixes omitted for brevity. */
}

#header #button .content {
  opacity:0;
}

Dans ce code, l'opacité de l'élément masqué est définie sur 0 lorsque l'élément #header #button est pas survolé. Lorsque l'élément #header #button est survolé, l'opacité de l'élément masqué est définie sur 1, le révélant avec un effet de fondu entrant fluide.

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!