CSS 可见性转换无效

Question

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

案例 1：

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

案例二：

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

Answer 1

这不是错误- 您只能在 ordinal/calculable 属性上进行转换（一种简单的思考方式是任何属性带有数字开始和结束数值..虽然有一些例外）。

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

visibility 在这种情况下是二进制设置 (visible/hidden)，因此一旦过渡持续时间结束，属性只是切换状态，您将其视为延迟 - 但它实际上可以看作是过渡动画的最终关键帧，中间的关键帧还没有计算（hidden/visible之间的值是什么构成的？不透明度？尺寸？因为不明确，所以不计算）。

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

可以找到可转换（动画）属性的列表here

Answer 2

可见性是可动画的。查看此博客 post：http://www.greywyvern.com/?post=337

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

假设您有一个要在鼠标悬停时淡入和淡出的菜单。如果你只使用 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>

Answer 3

根据规范，可见性是可动画的属性，但可见性的转换不会像人们预期的那样逐渐起作用。相反，在可见性上的过渡会延迟隐藏元素。另一方面，使元素可见会立即生效。这是 ，因为它由规范 定义（在默认计时功能的情况下）并且在浏览器中实现。

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

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

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

CSS 可见性转换无效

CSS transition with visibility not working

css

css-transitions