在构建元素时，我可以暂时关闭所有CSS3过渡/动画吗？

Question

我为网站创建了一个相当复杂的菜单。该菜单源于大量基于CSS3的动画。但是，当我导航到另一个页面时，菜单应该最初构建 - 并且没有所有动画，但是完成了JS而不是服务器端。

现在我想知道如何暂时完全禁用所有过渡/动画，直到菜单生成。

我考虑过创建一个覆盖动画的子类，但它似乎不起作用，因为它总是在基类中定义的动画/过渡使用？

Answer 1

我建议在构建菜单后通过JavaScript添加的类来应用动画/过渡。

有animation-play-state属性可以暂停动画，但只在Safari 5和Chrome 4中出现（带前缀）（与其他动画属性的Safari 4和Chrome 2相对），我是不确定它是否适用于您的目的。

Answer 2

您可以在构建菜单时将transition-duration设置为0s，然后将其重新设置为所需的值。