为什么 CSS 过渡无法与 Visibility 属性配合使用？

CSS 转换和可见性：一种欺骗性的错觉

在 CSS 中，转换允许在属性状态之间实现平滑的动画。然而，在尝试转换可见性时出现了一个令人费解的问题，让用户感到困惑并想知道这是否是一个错误。

可见性转换的案例

考虑以下代码：

<code class="css">#inner {
    visibility: hidden;
    transition: visibility 1000ms;
}

#outer:hover #inner {
    visibility: visible;
}</code>

此代码旨在将鼠标悬停在 ID 为“outer”的元素上时显示 ID 为“inner”的元素。然而，令我们沮丧的是，过渡未能按预期进行。可见性不是平滑过渡，而是在延迟后突然切换，这与指定的过渡持续时间相匹配。

罪魁祸首

根本原因在于可见性的本质财产。与表示连续值 (0-1) 的不透明度等属性不同，可见性以二元状态存在（可见或隐藏）。这种根本差异阻碍了转换，因为没有中间状态可以插值。

可转换属性

转换依赖于计算两个数值之间的关键帧。在不透明度的情况下，过渡在 0 和 1 之间平滑淡出。但是，在可见性下，过渡缺乏插值所需的数值范围。

结论

而这种行为最初类似于 bug，但它是 CSS 转换的固有限制。只有具有可计算值的属性才能平滑地进行动画处理。对于像可见性这样的二元属性，突然的状态变化是不可避免的。

以上是为什么 CSS 过渡无法与 Visibility 属性配合使用？的详细内容。更多信息请关注PHP中文网其他相关文章！