8
我想弄清楚使用CSS3动画事件和事件监听器来获得对CSS3动画的微调控制的一种可靠的交叉（现代）浏览器方法。我知道它可能做到这一点。可悲的是，尽管我在过去的2-3周内完成了所有的研究，但目前我的能力超出了我的能力范围。如何使用jQuery同步CSS3动画事件和事件监听器
这是我对这个的jsfiddle至今：http://jsfiddle.net/mvkMH/23/
这里是我想要做的事： 我有一个<ul>含<li>的一类的.box#main的ID。当用户点击任何.box它添加.move-y类($this) - 它也同时增加了.move-x类剩余列表项。当用户点击另一个.box，所有现有的.move-y and .move-x类被替换为.move-y-rvs and .move-x-rvs类。一直使用CSS3动画事件来保持一切完美同步。
为什么CSS3动画活动？
- CSS3动画快速iOS上
- CSS3动画通过jQuery触发允许你“重新开始”，如果它已经（https://css-tricks.com/restart-css-animation/）
- 从理论上讲，通过使用jQuery跟踪已经播放的动画AnimationStart，AnimationEteration and AnimationEnd事件可以创建非常复杂和互动的CSS3动画。
这里是脚本应该在我脑海里的工作方式 - 我只是无法得到它在现实生活中;-)
工作在点击.box的元素，检查#main对于任何.move-x和.move-γ类
如果检测到.move-x和.move-γ类：
- 与移动-X-RVS和替换这些类.move- y-rvs
- 附加CSS 动画事件听众与.move-X-RVS和.move-Y-RVS类
- 在AnimationEnd事件除去.move-X-RVS和.move-Y-的元素RVS类
- 设置AnimationName为空字符串（这个重置CSS3动画再玩一次，如果再次点击）
- 现在添加.move-Y类$（本）
- 添加.move- X类所有其他剩余的列表项目
如果.move-x和。未检测到移动-Y：
- 添加.move-Y类$（本）
- 添加.move-X类所有其他剩余的列表项目
4日 - 动画事件监听功能应该追加现代浏览器的前缀（就像这个例子 - How do I re-trigger a WebKit CSS animation via JavaScript?）
再次，这是我的jsfiddle在此目前为止：http://jsfiddle.net/mvkMH/23/
任何帮助您的人可以提供将不胜感激！
在此先感谢！ Bizarro.Z
'$ mbox'在您的小提琴中没有定义错误？ – mrtsherman
相当古老，但我来到这里......只是在你的小提琴中修复错误 http://jsfiddle.net/mvkMH/82/ – Krym