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

解决方法

这不是一个错误 – 您只能在顺序/可计算属性(一个简单的思考方式，这是任何具有数字开始和结束编号的属性值)的转换。虽然有一些例外)。

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

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

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

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

原文地址：https://www.jb51.cc/css/219953.html