为什么 CSS 可见性过渡不像不透明度那样工作？

过渡效果对 CSS 可见性的影响

问题介绍

过渡效果在 CSS 中常用来创建流畅的动画。但是，在某些属性（例如可见性）上进行转换时会出现问题。在这种情况下，过渡似乎没有按预期工作，并且行为与不透明度等其他属性不同。

可见性与不透明度的过渡

在在提供的示例中，过渡应用于元素的可见性和不透明度：

对于可见性：

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

对于不透明度：

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

过渡效果对于不透明度按预期工作，但无法触发可见性。尽管设置了 1000 毫秒的过渡持续时间，但没有观察到任何动画。

说明

观察到的行为不是错误，而是过渡效果实现方式的结果CSS。转换通过计算两个值之间的关键帧并对中间状态进行动画处理来工作。但是，可见性是一个二进制值（可见或隐藏），不允许这些状态之间存在数值。

因此，过渡持续时间被解释为可见性属性从隐藏切换之前的延迟悬停时可见（反之亦然）。这种延迟模仿了过渡的效果，但它不是与不透明度过渡相同意义上的真正动画。

Transitionable Properties

为了确保平滑的动画，过渡应该应用于序数属性，这些属性具有明确的开始值和结束值以及数值。可在此链接中找到可转换属性的列表：

[可转换属性参考的链接]

以上是为什么 CSS 可见性过渡不像不透明度那样工作？的详细内容。更多信息请关注PHP中文网其他相关文章！