Pourquoi la transition de visibilité CSS ne fonctionne-t-elle pas comme l'opacité ?

Effets de transition sur la visibilité CSS

Introduction au problème

Les effets de transition sont couramment utilisés en CSS pour créer des animations fluides. Cependant, des problèmes surviennent lors de la transition sur certaines propriétés, comme la visibilité. Dans cette situation, la transition ne semble pas fonctionner comme prévu et le comportement diffère d'autres propriétés comme l'opacité.

Transition entre visibilité et opacité

Dans dans l'exemple fourni, une transition est appliquée à la visibilité et à l'opacité d'un élément :

Pour la visibilité :

#inner {
  visibility: hidden;
  transition: visibility 1000ms;
}
#outer:hover #inner {
  visibility: visible;
}

Pour l'opacité :

#inner1 {
  opacity: 0;
  transition: opacity 1000ms;
}
#outer1:hover #inner1 {
  opacity: 1;
}

L'effet de transition fonctionne comme prévu pour l'opacité, mais ne parvient pas à se déclencher pour la visibilité. Malgré la définition d'une durée de transition de 1000 ms, aucune animation n'est observée.

Explication

Le comportement observé n'est pas un bug mais le résultat de la façon dont les effets de transition sont implémentés dans CSS. Les transitions fonctionnent en calculant des images clés entre deux valeurs et en animant des états intermédiaires. Cependant, la visibilité est une valeur binaire (visible ou cachée), qui ne permet pas de valeurs numériques entre ces états.

Par conséquent, la durée de transition est interprétée comme un délai avant que la propriété de visibilité ne passe de cachée à visible (ou vice versa) en survol. Ce délai imite l'effet d'une transition, mais ce n'est pas une véritable animation au même sens que les transitions d'opacité.

Propriétés transitionnelles

Pour garantir des animations fluides, les transitions doivent être appliqué aux propriétés ordinales, qui ont une valeur de début et de fin claire avec des valeurs numériques. Une liste des propriétés transitionnables peut être trouvée sur ce lien :

[Lien vers la référence des propriétés transitoires]

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!