jquery - 如何使用 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 动画事件？

• 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 事件 上删除 .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/

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

提前致谢!奇怪的Z

Answer 1

看看jquery.transit插件