CSS 关于二进制属性的转换（例如可见性）
CSS transitions regarding binary properties (eg visibility)
在可见性 hidden 和 visible 之间转换时，我发现了一个奇怪的行为。似乎在转到 visible 时，它会在过渡持续时间开始时立即变为 visible。但是回到 hidden，它会等到过渡持续时间完成后才消失。
这是什么原因？这是我可以依赖的东西，还是我应该明确设置它们的转换延迟？
这是因为这是转换 visible 属性:
的推荐实现
visibility: if one of the values is ‘visible’, interpolated as a discrete step where values of the timing function between 0 and 1 map to ‘visible’ and other values of the timing function (which occur only at the start/end of the transition or as a result of ‘cubic-bezier()’ functions with Y values outside of [0, 1]) map to the closer endpoint; if neither value is ‘visible’ then not interpolable.
基本上，只要过渡百分比不是 0.00（或 1.00），就会使用 visible。因此，如果过渡百分比为 10% (0.1)，则它是可见的。这就是它立即变得可见的原因。在转换完全完成之前无法识别其他值，因为在转换过程中使用了 visible。
根据您的使用情况，您可以使用 transition-delay，可以使用关键帧 animation，可以过渡 opacity 属性，或者您可以尝试使用 cubic-bezier 函数。
在可见性 hidden 和 visible 之间转换时，我发现了一个奇怪的行为。似乎在转到 visible 时，它会在过渡持续时间开始时立即变为 visible。但是回到 hidden，它会等到过渡持续时间完成后才消失。
这是什么原因？这是我可以依赖的东西，还是我应该明确设置它们的转换延迟？
这是因为这是转换 visible 属性:
visibility: if one of the values is ‘visible’, interpolated as a discrete step where values of the timing function between 0 and 1 map to ‘visible’ and other values of the timing function (which occur only at the start/end of the transition or as a result of ‘cubic-bezier()’ functions with Y values outside of [0, 1]) map to the closer endpoint; if neither value is ‘visible’ then not interpolable.
基本上，只要过渡百分比不是 0.00（或 1.00），就会使用 visible。因此，如果过渡百分比为 10% (0.1)，则它是可见的。这就是它立即变得可见的原因。在转换完全完成之前无法识别其他值，因为在转换过程中使用了 visible。
根据您的使用情况，您可以使用 transition-delay，可以使用关键帧 animation，可以过渡 opacity 属性，或者您可以尝试使用 cubic-bezier 函数。