关于二元属性（例如可见性）的CSS转换

Question

当在可见度hidden和visible之间转换时，我发现了一个奇怪的行为。看起来好像去了visible，它在转换时间开始时立即变为visible。但是回到hidden，它会等到转换持续时间完成后才会消失。

这是什么原因？这是我可以依赖的东西，还是我应该明确设置其转换延迟？

Answer 1

这样做的原因是因为这是过渡的visible财产的建议的实施：

从the W3 for CSS Transitions：

可视性：如果一个值是“看得见”，插值为离散步骤，其中0和1之间的定时函数的值映射到定时函数的“可见”和其他值（其仅出现在转换的开始/结束处或者作为'Y-Bezier（）'函数的结果[0,1]之外的值）映射到更近的端点;如果两个值都不可见，则不可插入。

基本上，visible用于转换百分比不是0.00（或1.00）时。所以，如果转换百分比是10％（0.1），那么它是可见的。这就是为什么它立即变得可见。其他值在转换完成之前不会被识别，因为在转换过程中使用了可见性。

根据您的使用情况，您可以使用transition-delay，你可以使用一个关键帧animation，你可以转换的opacity财产，或者你可以尝试使用cubic-bezier功能。