Pourquoi la transition CSS ne fonctionne-t-elle pas avec la propriété « display » ?

La transition CSS3 ne fonctionne pas avec la propriété d'affichage

Description du problème :

Tentative d'utilisation d'un La transition CSS pour faire apparaître un div caché lors du survol ne donne pas le résultat souhaité ; aucune transition d'assouplissement n'est observée.

Analyse du code :

Après examen du code fourni, il apparaît clairement que le problème vient de l'utilisation de la propriété d'affichage. La propriété display en CSS contrôle la présence et la visibilité des éléments sur une page. Lorsqu'il est défini sur aucun, comme il se trouve dans l'état initial du div caché, l'élément est supprimé du flux de documents de la page et rendu effectivement invisible.

Applicabilité de la transition :

Les transitions CSS s'appliquent uniquement aux propriétés qui affectent la géométrie ou l'apparence de l'élément. Dans le cas de la propriété display, elle bascule l'état de visibilité de l'élément plutôt que de modifier sa géométrie ou son apparence. Par conséquent, les transitions ne peuvent pas être appliquées à la propriété d'affichage.

Solution alternative utilisant l'opacité :

Au lieu d'utiliser la propriété d'affichage, envisagez d'utiliser la propriété d'opacité pour obtenir l'effet de fondu souhaité. L'opacité contrôle la transparence d'un élément, lui permettant de fondre en douceur en ajustant son opacité de 0 à 1.

Code CSS mis à jour :

Le code CSS mis à jour suivant utilise la propriété d'opacité pour créer une transition de fondu entrant en douceur :

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

Avantages de la transition basée sur l'opacité :

• Permet un contrôle précis sur l'effet de fondu en ajustant la valeur d'opacité.
• Préserve la position et les dimensions de l'élément pendant la transition, contrairement à l'affichage qui supprime l'élément du flux de documents.
• Compatible avec les transitions CSS, permettant des transformations fluides et animées.

Conclusion :

Bien que les transitions CSS ne puissent pas être appliquées à la propriété d'affichage, la propriété opacité fournit une solution viable et efficace pour créant des effets de fondu fluides en survol. En ajustant la valeur d'opacité, vous pouvez contrôler la visibilité et l'apparence des éléments masqués, réalisant ainsi les transitions souhaitées de manière transparente.

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!