为什么 CSS 过渡不能与可见性一起使用？

CSS 过渡和可见性：属性难题

使用 CSS 过渡时，您可能会遇到某些属性似乎过渡平滑的情况，而其他一些问题，例如可见性，则被证明是有问题的。为了理解这种行为，让我们深入研究转换的本质。

转换依赖于两个不同值之间的转换。具有数值（例如不透明度）的属性允许计算关键帧和值之间的插值。但是，诸如可见性之类的属性在二进制设置（可见/隐藏）上运行。

在可见性的情况下，浏览器将过渡持续时间解释为悬停时的延迟。这不是一个错误，而是无法在隐藏状态和可见状态之间进行插值的结果。出现延迟过渡效果是因为浏览器会等到持续时间结束才突然切换可见性状态。

相反，不透明度过渡按预期工作，因为属性的数值允许平滑插值。不透明度值逐渐从 0 过渡到 1，从而创建平滑的淡入淡出效果。

要对可见性属性进行动画处理，请考虑使用不透明度或其他可转换的测量属性（例如高度、宽度）作为可见性的代理。例如，您可以在高度上使用过渡，并将高度设置为 0（表示“隐藏”状态）和非零值（表示“可见”状态）。

以上是为什么 CSS 过渡不能与可见性一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！