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

Posted 2023-03-06

【中文标题】我可以在构建元素时暂时关闭所有 CSS3 过渡/动画吗？

【英文标题】：Can I temporarily turn off all CSS3 transitions/animations whilst an element is built?

【发布时间】：2012-01-08 19:52:44

【问题描述】：

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

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

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

【问题讨论】：

潜在相关：***.com/questions/11131875/…

【参考方案1】：

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

animation-play-state 属性可以暂停动画，但它只出现在 Safari 5 和 Chrome 4 中（与 Safari 4 和 Chrome 2 中的其他动画属性相反），我不确定如果它适合您的目的。

【讨论】：

我有这种感觉，你是绝对正确的。在我写这 2500 行之前，我没有想到这一点，我感到难以置信的喜悦。不过，我仍然梦想有一个更简单的解决方案。

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

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

哦 - 我在答案中添加了 -webkit-animation-play-state 的提及 - 我以前以为我有过，虽然我不确定它会帮助你的情况。

对于过渡，我认为其目的是让它们的实现非常简单，但牺牲了灵活性。对于动画，我认为您可以将-webkit-animation-name 属性设置为none 以禁用动画。

【参考方案2】：

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