具有可见性的CSS过渡不起作用

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

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

情况1：

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

情况2：

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

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

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

visibility 在这种情况下，它是一个二进制设置（可见/隐藏），因此，当过渡持续时间过去后，该属性会简单地切换状态，您会看到这是一个延迟-但实际上可以将其视为过渡动画的最终关键帧，中间关键帧尚未计算出来（隐藏/可见之间的值是什么？不透明度还是维度？由于尚不明确，因此不计算在内）。

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

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

可见性是可动画的。检查有关此博客的文章：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>

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

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

将不透明度过渡与可见性过渡结合起来通常很有用！尽管不透明度似乎是正确的做法，但完全透明的元素（不透明度为0）仍会收到鼠标事件。因此，例如仅通过不透明度过渡而淡出的元素上的链接仍会响应点击（尽管不可见），而在淡出的元素后面的链接不起作用（尽管通过淡出的元素可见）。参见http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html。

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