Pourquoi ma transition CSS3 ne fonctionne-t-elle pas lors de l'utilisation de la propriété Display ?

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

Vue d'ensemble

Cet article aborde le problème des transitions CSS qui ne fonctionnent pas correctement lors de l'utilisation de la propriété display. Il fournit des informations et des solutions alternatives pour atteindre l'objectif souhaité.

Énoncé du problème

L'objectif est de créer un effet dans lequel un div caché apparaît en douceur lorsque vous survolez son élément parent. Cependant, les tentatives d'implémentation de cela à l'aide de transitions CSS ont échoué, ce qui a entraîné l'apparition du div caché sans aucune transition.

Cause première

Les transitions CSS ne peuvent pas être appliquées aux éléments avec la propriété d'affichage définie. à aucun. En effet, display: none supprime entièrement l'élément du flux de documents, le rendant indisponible pour aucun effet.

Solution alternative

Pour obtenir l'effet de fondu souhaité, nous pouvons utiliser la propriété d'opacité à la place. d'affichage. En manipulant l'opacité du div caché, on peut le révéler progressivement au survol.

Voici le code CSS mis à jour :

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

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;

    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

Dans ce code, l'opacité du div caché est initialement défini sur 0, ce qui le rend invisible. Lorsque le bouton parent est survolé, l'opacité passe progressivement à 1, révélant le div avec un effet de fondu fluide.

Conclusion

En comprenant les limites de la propriété d'affichage et en implémentant une solution alternative en utilisant l'opacité, on peut obtenir la transition de fondu souhaitée pour les éléments cachés lors du survol.

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!