Angularjs 在定义不同动画的同一元素上切换类时，是否可以限制CSS动画仅播放一次？

基本上，我正在尝试展示一个动画，它是关于在“最近的动作”中受到影响的某些元素。此动画完成后，不应再次播放。我现在的问题是，我还定义了一个动画，它在元素被“选中”时运行。取消选择元素后，即使已达到

动画迭代计数

的1，也会再次播放原始动画。我当然可以为

animationend

触发设置事件侦听器，然后删除与动画关联的类。我更多的是想解释为什么这不符合预期。我想这是一种相反的情况

document.querySelector（“.一次性动画”）.addEventListener（“单击”，函数（e）{
e、 target.classList.toggle（'selected'）；
})

。一次性动画{
动画：一次动画2s向前1；
}
.选定{
动画：选择2秒，向前1秒；
}
@一次动画的关键帧{
从{
背景：红色；
}
到{
背景：透明；
}
}
@选定的关键帧{
从{
框阴影：0绿色插图；
}
到{
盒影：0 10px绿色镶嵌；
}
}

---

单击以切换选定的类

我相信在重新应用时，

动画迭代计数

会重置，因为您切换了

选择

类。这是由于CSS的级联特性造成的

一个选项是，当您选择时，只需删除

一次性动画

类：

document.querySelector（'.selective'）。addEventListener（“单击”，函数（e）{
e、 target.classList.remove（'one-time-animation'）；
e、 target.classList.toggle（'selected'）；
})

。一次性动画{
动画：一次动画2s向前1；
}
.选定{
动画：选择2秒，向前1秒；
}
@一次动画的关键帧{
从{
背景：红色；
}
到{
背景：透明；
}
}
@选定的关键帧{
从{
框阴影：0绿色插图；
}
到{
盒影：0 10px绿色镶嵌；
}
}

---

单击以切换所选类

纯CSS解决方案：（不会污染所选的

样式）

假设所提供的动画与应用程序中使用的动画完全相同，而不仅仅是一些随机样本，您实际上可以使用
过渡
代替
动画
。这也将确保原始动画永远不会被删除，因此永远不会重放


document.querySelector（“.一次性动画”）.addEventListener（“单击”，函数（e）{
e、 target.classList.toggle（'selected'）；
})
。一次性动画{
动画：一次动画2s向前1；
}
@一次动画的关键帧{
从{
背景：红色；
}
到{
背景：透明；
}
}
/*执行以下更改*/
.选定{
盒影：0 10px绿色镶嵌；
过渡：框阴影；
}
/*通常不需要以下选项，但如果框阴影只是立即出现，而不是逐渐出现，则取消对其注释
div{
框阴影：0绿色插图；
}
*/

单击以切换所选类
我喜欢您的CSS解决方案，但您的JavaScript解决方案对于它所做的工作来说有点过头了。它在非webkit浏览器上也不起作用（Firefox仍然非常流行）。我会删除它，继续使用你更优雅的CSS解决方案。@shennan:我已经更新了JS解决方案以支持Firefox:）JS解决方案更像是一种概念验证。添加它是因为在某些情况下，原始动画可能不同，但选定的动画是常见的（正如我在回答中提到的）。是的，您刚刚添加了大量不雅观的代码来处理其他浏览器。我并不是在试图反驳；我只是觉得如果没有JS解决方案，你的答案会更好。我已经提供了一个JS解决方案，它使用额外的一行代码使其工作。您已经添加了20多行。只是一个建议；我不想惹人生气。：-）我已经给了你理由。但你有权不同意。另外，你可能想继续尝试Firefox支持；您的解决方案仍然无法在Firefox上运行（使用版本40+进行测试）。它似乎也不适用于Safari。不过，您的CSS解决方案在这两种情况下都能完美工作。：-）@Harry我想我真的不喜欢浏览器处理这个问题的方式，它看起来不直观。然而，这个答案显然更完整，并且提供了不止一个纯CSS解决方案，以及一个足够容易理解的解释。正如你提到的，这就是我提出这个问题的意图。谢谢这就是我最终采取的方法。这在我的用例中是有意义的，因为一旦用户“选择”了某个东西，一次性动画状态对于元素就不再有效了。但是我真的不喜欢用删除一个几乎不相关的类的逻辑来污染我的VM的select方法的逻辑。唉，这似乎是两害相权取其轻。在我的例子中，如果某个vm属性为真，则此动画通过ngClass应用，因此我只需在ngClick上切换该状态。@bodine一个纯粹而优雅的CSS解决方案会很好，但多年来，我已经接受了这样的细微差别。我在开发中的第一堂重要课程之一是学会将逻辑和风格分开。我的下一个重要教训是认识到它们不可能总是分开的。你需要使用你必须使用的工具来完成这项工作。因此，如果你将原始动画链接到你要切换的类的选择器上，基本上答案似乎是肯定的。否则，如果可能，请使用过渡，而不是动画。要不然就他妈的去死吧。