Transition CSS avec visibilité ne fonctionne pas


102

Dans le violon ci-dessous, j'ai une transition sur la visibilité et l'opacité séparément. Ce dernier fonctionne mais pas le premier. De plus, en cas de visibilité, le temps de transition est interprété comme un retard au survol. Cela se produit dans Chrome et Firefox. Est-ce un bug?

http://jsfiddle.net/0r218mdo/3/

Cas 1:

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

Cas 2:

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

4
ce dernier fonctionne car le opacitypeut prendre plusieurs valeurs entre 0et 1, tandis que visibilitypeut être uniquement visibleou hidden(pas de valeurs intermédiaires)
Fabrizio Calderan

Réponses:


148

Ce n'est pas un bogue - vous ne pouvez effectuer une transition que sur des propriétés ordinales / calculables (une façon simple de penser à cela est toute propriété avec une valeur numérique de début et de fin ... bien qu'il y ait quelques exceptions).

En effet, les transitions fonctionnent en calculant des images clés entre deux valeurs et en produisant une animation en extrapolant des quantités intermédiaires.

visibility dans ce cas, il s'agit d'un paramètre binaire (visible / masqué), donc une fois la durée de transition écoulée, la propriété change simplement d'état, vous voyez cela comme un retard - mais il peut en fait être vu comme l'image clé finale de l'animation de transition, avec le les images clés intermédiaires n'ayant pas été calculées (qu'est-ce qui constitue les valeurs entre caché / visible? Opacité? Dimension? Comme ce n'est pas explicite, elles ne sont pas calculées).

opacity est un paramètre de valeur (0-1), les images clés peuvent donc être calculées sur la durée fournie.

Une liste des propriétés transitionnelles (animables) peut être trouvée ici


7
dev.w3.org/csswg/css-transitions/#animtype-visibility spécifie que les valeurs intermédiaires correspondent à "visible".
Beni Cherniavsky-Paskin

@ BeniCherniavsky-Paskin - cela dépend de la fonction de chronométrage:other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with Y values outside of [0, 1]) map to the closer endpoint
SW4

1
La réponse de SW4 est trompeuse et n'explique pas le malentendu quant à l'objectif de la visibilité.
JesseMonroy650

@ JesseMonroy650 - bien que j'hésite à réfuter, il est plus facile de le faire sans qu'aucune preuve supplémentaire ne soit fournie pour cette affirmation, ce serait fascinant si vous pouviez élaborer? L'OP ne demandait pas le but de la visibilité (qui est différent de l'affichage, l'opacité) mais pourquoi elle ne peut pas être animée en tant que propriété, à savoir pour la raison donnée - il s'agit en fait d'un paramètre marche / arrêt. La réponse ne cherche pas à aborder `` ce qu'est la visibilité '' mais `` pourquoi elle ne peut pas être animée ''
SW4

Nous pourrions chipoter sur la signification du PO, mais je vais le contrer. Agacé par le thème constant (incomplet) et l'incapacité à faire ce travail, je décide de l'étudier. Tout d'abord, il convient de noter que la documentation est médiocre ; les explications sont médiocres, la spécification est mal rédigée (l'éditeur a une note aussi). Bien que documenté comme animatable, en fait, il n'a que peu de propriétés; l'une de ces propriétés étant le timing . Je vais bientôt bloguer.
JesseMonroy650

67

La visibilité est animable. Consultez cet article de blog à ce sujet: http://www.greywyvern.com/?post=337

Vous pouvez le voir ici aussi: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Supposons que vous ayez un menu que vous souhaitez fondre en entrée et en sortie lors du survol de la souris. Si vous utilisez opacity:0uniquement, votre menu transparent sera toujours là et s'animera lorsque vous survolerez la zone invisible. Mais si vous ajoutez visibility:hidden, vous pouvez éliminer ce problème:

div {
    width:100px;
    height:20px;
}
.menu {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
    
    background:#eee;
    width:100px;
    margin:0;
    padding:5px;
    list-style:none;
}
div:hover > .menu {
    visibility:visible;
    opacity:1;
}
<div>
  <a href="#">Open Menu</a>
  <ul class="menu">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>


2
Ce n'est pas vrai. L'article montre clairement: 1: l'utilisateur passe la souris sur l'élément 2: la visibilité passe au visible 3: l'animation de transition d'opacité commence
Ben Racicot

5
Et pourtant, l'article atteint l'équivalent fonctionnel de la visibilité animée, en passant adroitement à l'opacité. Cela explique bien pourquoi il faut encore jouer avec la visibilité pour pouvoir cliquer sur des choses "sous" un objet caché, comme avec un menu déroulant. Mais cette réponse serait meilleure si elle donnait un exemple et un résumé localement . (Les liens se cassent; je viens d'en réparer un.)
Bob Stein

cette réponse est un peu trompeuse, mais elle a néanmoins fonctionné grâce!
JaTo

2
@ BobStein-VisiBone J'ai édité ma réponse et donné un exemple. Merci pour votre aide :)
Sevban Öztürk

20

La visibilité est une propriété animable selon la spécification, mais les transitions sur la visibilité ne fonctionnent pas progressivement, comme on pourrait s'y attendre. Au lieu de cela, les transitions sur le délai de visibilité masquent un élément. Par contre, rendre un élément visible fonctionne immédiatement. Ceci est tel qu'il est défini par la spécification (dans le cas de la fonction de minutage par défaut) et tel qu'il est implémenté dans les navigateurs.

C'est aussi un comportement utile, puisqu'en fait on peut imaginer divers effets visuels pour cacher un élément. La décoloration d'un élément n'est qu'un type d'effet visuel spécifié à l'aide de l'opacité. D'autres effets visuels peuvent déplacer l'élément en utilisant par exemple la propriété transform, voir également http://taccgl.org/blog/css-transition-visibility.html

Il est souvent utile de combiner la transition d'opacité avec une transition de visibilité! Bien que l'opacité semble faire la bonne chose, les éléments entièrement transparents (avec l'opacité: 0) reçoivent toujours des événements de souris. Ainsi, par exemple, les liens sur un élément qui a été atténué avec une transition d'opacité seule, répondent toujours aux clics (bien que non visibles) et les liens derrière l'élément fané ne fonctionnent pas (bien qu'ils soient visibles à travers l'élément fané). Voir http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html .

Ce comportement étrange peut être évité en utilisant simplement les deux transitions, la transition sur la visibilité et la transition sur l'opacité. Ainsi, la propriété de visibilité est utilisée pour désactiver les événements de souris pour l'élément tandis que l'opacité est utilisée pour l'effet visuel. Cependant, il faut veiller à ne pas masquer l'élément pendant la lecture de l'effet visuel, qui autrement ne serait pas visible. Ici, la sémantique spéciale de la transition de visibilité devient pratique. Lorsque vous masquez un élément, l'élément reste visible pendant la lecture de l'effet visuel et est ensuite masqué. En revanche, lors de la révélation d'un élément, la transition de visibilité rend l'élément visible immédiatement, c'est-à-dire avant de jouer l'effet visuel.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.