如何使用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 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 - 动画事件监听器功能应附加现代浏览器的前缀(如本例所示 - 如何通过JavaScript重新触发WebKit CSS动画？)

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

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

提前致谢!Bizarro.Z

Answer 1

看看jquery.transit插件