web-dev-qa-db-fra.com

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 le premier ne fonctionne pas. De plus, en cas de visibilité, le temps de transition est interprété comme un retard en stationnaire. Cela se passe dans Chrome & 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;
}
csscss3css-transitions
81
user4150760

Ceci n'est pas un bug - vous pouvez uniquement faire la transition entre 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 les 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é). Ainsi, une fois la durée de la transition écoulée, la propriété change simplement d'état, vous voyez cela comme un délai, mais vous pouvez le voir comme l'image clé finale de la clé. animation de transition, les images clés intermédiaires n’ayant pas été calculées (que sont les valeurs cachées/visibles? Opacité? Dimension? Comme elles ne sont pas explicites, elles ne sont pas calculées).

opacity correspond à une valeur (0-1). Ainsi, les images clés peuvent être calculées pour la durée indiquée.

Une liste des propriétés pouvant être transposées (animables) peut être trouvée here

117
SW4

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 fondu avec le survol de la souris. Si vous utilisez uniquement opacity:0, votre menu transparent sera toujours présent et il 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>
42
Sevban Öztürk

La visibilité est une propriété qui peut être animée conformément à la spécification, mais les transitions de visibilité ne fonctionnent pas progressivement, comme on pourrait s'y attendre. Au lieu de cela, les transitions sur la visibilité retardent le masquage d'un élément. D'autre part, 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 synchronisation par défaut) et comme il est mis en œuvre dans les navigateurs.

C'est également un comportement utile, car en fait, on peut imaginer divers effets visuels pour masquer un élément. La suppression progressive d'un élément n'est qu'un type d'effet visuel spécifié par l'opacité. D'autres effets visuels peuvent éloigner l'élément en utilisant par exemple la propriété de transformation, voir aussi 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 être la solution, les éléments entièrement transparents (avec l'opacité: 0) reçoivent toujours des événements de souris. Donc, par exemple les liens sur un élément qui s'estompe avec une transition d'opacité uniquement, répondent toujours aux clics (bien qu'ils ne soient pas visibles) et les liens situés derrière l'élément s'estompent ne fonctionnent pas (bien qu'ils soient visibles à travers l'élément s'estompé). 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 prendre soin de ne pas masquer l'élément pendant la lecture de l'effet visuel, qui sinon ne serait pas visible. Ici, la sémantique spéciale de la transition de visibilité devient pratique. Lorsque vous masquez un élément, cet élément reste visible lors de la lecture de l'effet visuel. Il 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.

13
Helmut Emmelmann