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

我试图找出一个可靠的，跨现代的浏览器方法，使用CSS3动画事件和事件监听器来获得对CSS3动画的微调控制。 我知道可以做到这一点。 可悲的是，尽管我在过去的2-3周内完成了所有的研究，但现在这已经超出了我的能力范围。

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

这是我正在尝试做的事情：我有一个

，其id为#main包含
• ，类为.box 。 当用户点击任何.box它会将.move-y类添加到($this) – 它还会同时将.move-x类添加到剩余的列表项中。 当用户单击另一个.box ，所有现有的.move-y and .move-x类都将替换为.move-y-rvs and .move-x-rvs类。 一直使用CSS3 Animation事件来保持一切完美同步。

  为何选择CSS3动画事件？

  • CSS3动画在iOS上很快
  • 通过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 Event上删除.move-x-rvs和.move-y-rvs类
     • 将AnimationName设置为空字符串（如果再次单击，则重置css3动画以再次播放）
     • 现在将.move-y类添加到$（this）
     • 将.move-x类添加到所有其他剩余列表项

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

     • 将.move-y类添加到$（this）
     • 将.move-x类添加到所有其他剩余列表项

  4 – 动画事件监听器function应附加现代浏览器的前缀（如本例所示 – 如何通过JavaScript重新触发WebKit CSS动画？ ）

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

  任何人们可以提供的帮助将不胜感激！

  提前致谢！ Bizarro.Z

  Answer 1

  看看jquery.transit插件

  Answer 2

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