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

Question

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

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

案例一:

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

案例二:

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

Answer 1

这不是错误——您只能在序数/可计算属性上进行转换(一种简单的思考方式是任何具有数字开始和结束数值的属性..尽管有一个少数异常(exception))。

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

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

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

可以找到可转换(动画)属性的列表 here