可见性的 CSS 过渡不起作用

CSS transition with visibility not working

提问by user4150760

In the fiddle below, I've a transition on visibility and opacity separately. The latter works but the former doesn't. Moreover, in case of visibility, the transition time is interpreted as delay on hover out. Happens in both Chrome & Firefox. Is this a bug?

在下面的小提琴中，我分别对可见性和不透明度进行了转换。后者有效，但前者无效。此外，在可见性的情况下，过渡时间被解释为悬停时的延迟。在 Chrome 和 Firefox 中都会发生。这是一个错误吗？

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

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

Case 1:

情况1：

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

Case 2:

案例2：

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

回答by SW4

This is not a bug- you can only transition on ordinal/calculable properties (an easy way of thinking of this is any property with a numeric start and end number value..though there are a few exceptions).

这不是错误- 您只能在有序/可计算属性上进行转换（一种简单的思考方式是具有数字开始和结束数值的任何属性......尽管有一些例外）。

This is because transitions work by calculating keyframes between two values, and producing an animation by extrapolating intermediate amounts.

这是因为过渡通过计算两个值之间的关键帧来工作，并通过外推中间量来生成动画。

visibilityin this case is a binary setting (visible/hidden), so once the transition duration elapses, the property simply switches state, you see this as a delay- but it can actually be seen as the final keyframe of the transition animation, with the intermediary keyframes not having been calculated (what constitutes the values between hidden/visible? Opacity? Dimension? As it is not explicit, they are not calculated).

visibility在这种情况下是一个二进制设置（可见/隐藏），因此一旦过渡持续时间过去，该属性只是切换状态，您将其视为延迟-但实际上可以将其视为过渡动画的最终关键帧，具有没有计算中间关键帧（隐藏/可见之间的值是什么？不透明度？维度？因为它不明确，所以没有计算）。

opacityis a value setting (0-1), so keyframes can be calculated across the duration provided.

opacity是一个值设置 (0-1)，因此可以在提供的持续时间内计算关键帧。

A list of transitionable (animatable) properties can be found here

可以在此处找到可转换（动画）属性的列表

回答by Sevban ?ztürk

Visibility is animatable. Check this blog post about it: http://www.greywyvern.com/?post=337

可见性是可动画的。检查这篇关于它的博客文章：http: //www.greywyvern.com/?post =337

You can see it here too: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

你也可以在这里看到它：https: //developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Let's say you have a menu that you want to fade-in and fade-out on mouse hover. If you use opacity:0only, your transparent menu will still be there and it will animate when you hover the invisible area. But if you add visibility:hidden, you can eliminate this problem:

假设您有一个要在鼠标悬停时淡入和淡出的菜单。如果您opacity:0只使用，您的透明菜单将仍然存在，并且当您将鼠标悬停在不可见区域时它会产生动画效果。但是如果加上visibility:hidden，就可以消除这个问题：

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>

回答by Helmut Emmelmann

Visibility is an animatable property according to the spec, but transitions on visibility do not work gradually, as one might expect. Instead transitions on visibility delay hiding an element. On the other hand making an element visible works immediately. This is as it is defined by the spec(in the case of the default timing function) and as it is implemented in the browsers.

根据规范，可见性是一种可动画的属性，但正如人们所期望的那样，可见性的转换不会逐渐起作用。而是在可见性延迟时转换隐藏元素。另一方面，使元素可见立即起作用。这是由规范定义的（在默认计时功能的情况下）以及在浏览器中实现的。

This also is a useful behavior, since in fact one can imagine various visual effects to hide an element. Fading out an element is just one kind of visual effect that is specified using opacity. Other visual effects might move away the element using e.g. the transform property, also see http://taccgl.org/blog/css-transition-visibility.html

这也是一种有用的行为，因为实际上人们可以想象各种视觉效果来隐藏元素。淡出元素只是使用不透明度指定的一种视觉效果。其他视觉效果可能会使用例如 transform 属性移动元素，另请参阅http://taccgl.org/blog/css-transition-visibility.html

It is often useful to combine the opacity transition with a visibility transition! Although opacity appears to do the right thing, fully transparent elements (with opacity:0) still receive mouse events. So e.g. links on an element that was faded out with an opacity transition alone, still respond to clicks (although not visible) and links behind the faded element do not work (although being visible through the faded element). See http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html.

将不透明度过渡与可见性过渡结合起来通常很有用！尽管 opacity 似乎做了正确的事情，但完全透明的元素（具有 opacity:0）仍然接收鼠标事件。因此，例如，单独使用不透明度过渡淡出的元素上的链接仍然响应点击（尽管不可见）并且褪色元素后面的链接不起作用（尽管通过褪色元素可见）。请参阅http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html。

This strange behavior can be avoided by just using both transitions, the transition on visibility and the transition on opacity. Thereby the visibility property is used to disable mouse events for the element while opacity is used for the visual effect. However care must be taken not to hide the element while the visual effect is playing, which would otherwise not be visible. Here the special semantics of the visibility transition becomes handy. When hiding an element the element stays visible while playing the visual effect and is hidden afterwards. On the other hand when revealing an element, the visibility transition makes the element visible immediately, i.e. before playing the visual effect.

这种奇怪的行为可以通过使用两种过渡来避免，即可见性过渡和不透明度过渡。因此，可见性属性用于禁用元素的鼠标事件，而不透明度用于视觉效果。但是，必须注意不要在播放视觉效果时隐藏元素，否则将不可见。在这里，可见性转换的特殊语义变得很方便。隐藏元素时，该元素在播放视觉效果时保持可见，然后隐藏。另一方面，当显示元素时，可见性转换使元素立即可见，即在播放视觉效果之前。