Pourquoi les transitions CSS3 ne fonctionnent-elles pas lorsque l'affichage est défini sur Aucun ?

Les transitions CSS3 ne fonctionnent pas avec la propriété Display

En CSS, la propriété display joue un rôle essentiel dans la définition si un élément est visible ou masqué . Les transitions, en revanche, permettent des changements visuels fluides au fil du temps. Cependant, tenter d'appliquer des transitions à des éléments avec un affichage défini sur aucun peut entraîner un comportement inattendu.

Résoudre le problème

Le problème vient de la nature de l'affichage. propriété. Lorsque l'affichage d'un élément est défini sur aucun, il est supprimé de la page comme s'il n'y avait jamais été. En tant que tel, il ne peut pas être partiellement affiché ni subir de transitions.

Solution alternative : utiliser l'opacité

Pour obtenir l'effet de fondu souhaité au survol, envisagez plutôt d'utiliser la propriété d'opacité. . L'opacité contrôle la transparence d'un élément, lui permettant d'apparaître ou de disparaître progressivement.

Solution CSS

Implémentez les ajustements CSS suivants pour activer l'effet de fondu :

#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;
}

En combinant opacité et transition, le contenu caché apparaît lorsque vous survolez le bouton. Les préfixes des fournisseurs pour la compatibilité entre navigateurs ont été omis par souci de concision.

Autres considérations

Outre l'opacité, on pourrait également explorer l'ajustement de la hauteur et des propriétés de remplissage pour obtenir des résultats similaires. effets.

Supplémentaires Ressources

• [Tutoriel sur les transitions CSS](https://www.w3schools.com/css/css3_transitions.asp)
• [Gestion des éléments cachés avec CSS Transitions](https://css-tricks.com/transitions-with-hidden-elements/)
• [Sujet similaire sur le débordement de pile](https://stackoverflow.com/questions/30130725/css- animation-non-visible-quand-affichage-aucun)

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!