【发布时间】：2012-01-08 19:52:44
【问题描述】：
我为网站创建了一个相当复杂的菜单。菜单来自大量基于 CSS3 的动画。但是，当我导航到不同的页面时，菜单应该最初构建 - 并且没有所有动画，而是以 JS 方式完成而不是服务器端。
现在我想知道如何暂时完全禁用所有过渡/动画，直到菜单建立。
我想过创建一个覆盖动画的子类，但它似乎不起作用，因为它总是在使用基类中定义的动画/过渡？
【问题讨论】：
标签： javascript animation css transitions
【发布时间】：2012-01-08 19:52:44
【问题描述】：
我建议通过在构建菜单后由 JavaScript 添加的类来应用您的动画/过渡。
animation-play-state 属性可以暂停动画，但它只出现在 Safari 5 和 Chrome 4 中（与 Safari 4 和 Chrome 2 中的其他动画属性相反），我不确定如果它适合您的目的。
【讨论】：
-
我有这种感觉，你是绝对正确的。在我写这 2500 行之前，我没有想到这一点，我感到难以置信的喜悦。不过，我仍然梦想有一个更简单的解决方案。
-
我知道你的意思。不确定是否更容易——您可以在菜单开始构建时通过 JavaScript 删除有问题的类，并在完成后重新添加它。 （虽然如果类中除了动画还有其他样式，你也会失去这些。）
-
是的，这就是重点。这很复杂。对我来说通常是个谜，是为什么不能用新类设置过渡/动画，从而能够覆盖之前定义的类。如果可能的话，例如，“淡入淡出”过渡的时间可能与相应的“出现”过渡不同（从不透明度 0-1 和反向设置时）
-
哦 - 我在答案中添加了
-webkit-animation-play-state的提及 - 我以前以为我有过，虽然我不确定它会帮助你的情况。 -
对于过渡，我认为其目的是让它们的实现非常简单，但牺牲了灵活性。对于动画，我认为您可以将
-webkit-animation-name属性设置为none以禁用动画。
您可以在构建菜单时将transition-duration 设置为0s，然后再将其设置回所需的值。
【讨论】：