Pourquoi les transitions CSS ne fonctionnent-elles pas avec la propriété Visibility ?

Transitions CSS et visibilité : une illusion trompeuse

En CSS, les transitions permettent des animations fluides entre les états de propriété. Cependant, un problème déroutant survient lors de la tentative de transition de visibilité, laissant les utilisateurs perplexes et se demandant s'il s'agit d'un bug.

Le cas de la transition de visibilité

Considérez le code suivant :

<code class="css">#inner {
    visibility: hidden;
    transition: visibility 1000ms;
}

#outer:hover #inner {
    visibility: visible;
}</code>

Ce code vise à révéler l'élément avec l'ID "intérieur" en survolant l'élément avec l'ID "extérieur". Cependant, à notre grande consternation, la transition ne se déroule pas comme prévu. Au lieu d'une transition en douceur, la visibilité bascule brusquement après un délai qui correspond à la durée de transition spécifiée.

Le coupable

La cause profonde réside dans la nature de la visibilité propriété. Contrairement aux propriétés telles que l'opacité, qui représentent des valeurs continues (0-1), la visibilité existe dans un état binaire (visible ou masqué). Cette différence fondamentale entrave les transitions, car il n'y a pas d'états intermédiaires à interpoler.

Propriétés transitionnelles

Les transitions reposent sur le calcul d'images clés entre deux valeurs numériques. Dans le cas de l'opacité, la transition s'estompe doucement entre 0 et 1. Cependant, avec la visibilité, la transition n'a pas la plage numérique nécessaire pour interpoler.

Conclusion

Alors ressemblant initialement à un bug, ce comportement est une limitation inhérente aux transitions CSS. Seules les propriétés ayant des valeurs calculables peuvent être animées de manière fluide. Pour les propriétés binaires comme la visibilité, des changements d'état brusques sont inévitables.

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!