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

Question

我在可见性@looked_up_user和hidden之间转换时发现了一种奇怪的行为。似乎在转到visible时，它会在转换持续时间的开始时立即变为visible。但是回到visible，它会等到转换持续时间完成后再消失。

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

Answer 1

原因是因为这是转换.renderArray(dataArray)属性的推荐实现：

来自the W3 for CSS Transitions：

  

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

基本上，只要转换百分比不是0.00（或1.00），就会使用visible。因此，如果转换百分比是10％（0.1），那么它是可见的。这就是它立即变得可见的原因。在转换完全完成之前，无法识别其他值，因为在转换期间使用了可见。

根据您的使用情况，您可以使用visible，您可以使用关键帧transition-delay，您可以转换animation属性，或者您可以尝试使用{{1函数。