Transition CSS avec visibilité ne fonctionne pas

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

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

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>

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.