Question

在下面的小提琴中，我分别在可见度和不透明度上进行了转换。后者有效，但前者没有。此外，在可见性的情况下，转换时间被解释为悬停时的延迟。适用于Chrome和＆amp; Firefox浏览器。这是一个错误吗？

案例1：

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

案例2：

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

Answer 1

这不是一个错误 - 你只能转换序数/可计算属性（一种简单的方法是考虑这个是具有数字开始和结束数值的任何属性。虽然有一个少数例外）。

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

在这种情况下，

visibility是一个二进制设置（可见/隐藏），所以一旦过渡持续时间过去，属性只是切换状态，你会看到这是一个延迟 - 但它实际上可以看作是最终过渡动画的关键帧，中间关键帧尚未计算（隐藏/可见之间的值是什么？不透明度？尺寸？因为它不明确，所以不计算它们。）

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

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

Answer 2

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

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

让我们假设您有一个菜单，您希望在鼠标悬停时淡入和淡出。如果您仅使用opacity:0，则您的透明菜单仍然存在，当您将鼠标悬停在不可见区域时，它会生成动画。但是，如果添加visibility:hidden，则可以消除此问题：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

将不透明度过渡与可见性过渡相结合通常很有用！虽然不透明度似乎做得对，但完全透明的元素（不透明度：0）仍会接收鼠标事件。所以例如单独使用不透明度转换消失的元素上的链接仍然响应点击（虽然不可见），并且淡化元素后面的链接不起作用（尽管通过淡化元素可见）。请参阅http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html。

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

CSS过渡，可见性不起作用

3 个答案: