如何使用 jQuery 同步 CSS3 动画事件和事件监听器

Question

我正在尝试找出一种可靠的跨（现代）浏览器方法来使用 CSS3 动画事件 和事件侦听器来获得对 CSS3 动画的微调控制。我知道这样做是可能的。遗憾的是，尽管我在过去 2-3 周内完成了所有研究，但目前这远远超出了我的能力范围。

到目前为止，这是我的 jsfiddle：http://jsfiddle.net/mvkMH/23/

这是我想要做的： 我有一个<ul>，其ID 为#main，其中包含<li>，其类为.box。当用户点击任何.box 时，它会将.move-y 类添加到($this) - 它还同时将.move-x 类添加到剩余的列表项。当用户单击另一个.box 时，所有现有的.move-y and .move-x 类都将替换为.move-y-rvs and .move-x-rvs 类。一直使用 CSS3 动画事件来保持一切完美同步。

为什么选择 CSS3 动画事件？

• iOS 上的 CSS3 动画速度很快
• 通过 jQuery 触发的 CSS3 动画允许您“重新启动”已经播放过的动画 (https://css-tricks.com/restart-css-animation/)
• 理论上，通过使用 jQuery 跟踪 AnimationStart、AnimationIteration 和 AnimationEnd 事件，可以创建非常复杂的交互式 CSS3 动画。

这是脚本在我脑海中的工作方式 - 我只是无法让它在现实生活中工作;-)

1. 单击 .box 元素后，检查 #main 是否有任何 .move-x 和 .move-y 类

2. 如果检测到 .move-x 和 .move-y 类：

   • 将这些类替换为 move-x-rvs 和 .move-y-rvs
   • 使用 .move-x-rvs 和 .move-y-rvs 类将 css 动画事件侦听器附加到元素
   • 在 AnimationEnd 事件 中删除 .move-x-rvs 和 .move-y-rvs 类
   • 将 AnimationName 设置为空字符串（这会重置 css3 动画以在再次单击时再次播放）
   • 现在将 .move-y 类添加到 $(this)
   • 将 .move-x 类添加到所有其他剩余的列表项中

3. 如果未检测到 .move-x 和 .move-y：

   • 将 .move-y 类添加到 $(this)
   • 将 .move-x 类添加到所有其他剩余的列表项中

4 - Animation Event 侦听器功能应为现代浏览器附加前缀（如本例中 - How do I re-trigger a WebKit CSS animation via JavaScript?）

同样，到目前为止，这是我的 jsfiddle：http://jsfiddle.net/mvkMH/23/

如果您能提供任何帮助，我们将不胜感激！

提前致谢！ Bizarro.Z

Answer 1

看看jquery.transit插件

Answer 2

创建一个 jQuery 函数来更改具有特定 ID 的元素的类。 然后你可以通过调用jQuery代码中的函数来同步它们。