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

Question

在下面的小提琴中，我分别对可见性和不透明度进行了过渡。后者有效，但前者无效。此外，在可见的情况下，过渡时间被解释为悬停时的延迟。在Chrome和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），因此可以在提供的持续时间内计算关键帧。