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

我为网站创建了一个相当复杂的菜单。该菜单来自基于CSS3的大量动画。但是，当我导航到不同的页面时，菜单应该最初建立 - 并且没有所有动画，但是完成JS明智而不是服务器端。构建元素时，我可以暂时关闭所有CSS3过渡/动画吗？

现在我想知道我怎么会暂时完全禁用所有的转换/动画，直到菜单建成。

我想到了创建覆盖动画的子类，但它似乎没有工作，因为它始终是正在使用的基类中定义动画/过渡？

2011-11-29 SquareCat

潜在的相关：http://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily –

我建议通过多数民众赞成由JavaScript添加的菜单建成后一类应用你的动画/过渡。

有animation-play-state属性可以暂停动画，但只在Safari 5和Chrome 4中出现（前缀）（与其他动画属性相反，Safari 4和Chrome 2），并且我不确定是否它会为你的目的工作。

2011-11-29 13:21:01

我有这种感觉，你是绝对正确的。我有这种令人难以置信的快乐感觉，因为在写这些2.500行之前没有想过这个。尽管我仍然梦想着一个更简单的解决方案 – SquareCat

我知道你的意思。不确定是否更容易 - 当菜单开始构建时，您可以通过JavaScript删除有问题的类，并在完成后重新添加它。（虽然如果除了动画以外还有其他类型的风格，你也会失去这些风格。） –

是的，就是这一点。这非常复杂。对我来说，通常是一个谜，就是为什么不可能用一个新类来设置过渡/动画，从而能够覆盖之前定义的过渡/动画。如果可能的话，例如“淡入淡出”转换的定时可能不同于相应的“出现”转换（当从不透明度0-1和反转设置时） – SquareCat

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

2012-07-03 13:11:00 Jasper

回答