如何同步CSS3动画事件和事件侦听器与jQuery

问题描述

我试图找出了一个坚实的，跨（现代）浏览器的方法使用的 CSS3动画活动和事件监听器获得对CSS3动画的微调。我知道它有可能做到这一点。可悲的是它只是远远超出我的能力的那一刻，尽管所有的研究，我在过去的2-3周内完成。

I am trying to figure out out a solid, cross-(modern)browser method for using CSS3 Animation Events and Event Listeners to gain fine-tuned control over CSS3 animations. I know its possible to do this. Sadly it's just WAY beyond my capabilities at the moment, despite all the research I've done in the last 2-3 weeks.

下面是我对这个的jsfiddle至今：）

在理论上，通过使用jQuery来跟踪 AnimationStart AnimationIteration 和 AnimationEnd 事件可以创建非常复杂和交互式CSS3动画。

• CSS3 Animations are fast on iOS
• CSS3 Animation triggered via jQuery allow you to 'restart' the animation if it has been played already (https://css-tricks.com/restart-css-animation/)
• In theory, by using jQuery to keep track of AnimationStart, AnimationIteration and AnimationEnd events one can create very complex and interactive CSS3 animations.

下面是脚本应该在我脑海里的工作方式 - 我只是无法得到它在现实生活中工作; - ）

Here is the way the script should work in my mind - i just couldn't get it to work in real life ;-)

1. 一旦点击.box的元素，检查#main任何.move-x和.move-Y类

1. Upon clicking the .box element, Check #main for any .move-x and .move-y classes

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

If .move-x and .move-y classes are detected:

• 与移动-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类添加到所有其他剩余列表项

• replace those classes with move-x-rvs and .move-y-rvs
• Attach css Animation Event listeners to the elements with .move-x-rvs and .move-y-rvs classes
• On AnimationEnd Event remove the .move-x-rvs and .move-y-rvs classes
• Set AnimationName to an empty string (this resets the css3 animation to play again if clicked again)
• Now add the .move-y class to $(this)
• Add the .move-x class to all the other remaining list items

如果没有检测到.move-x和.move-Y：

If .move-x and .move-y are not detected:

• 的.move-Y类添加到$（本）


• 的.move-X类添加到所有其他剩余列表项

4 - 在动画活动监听功能应该追加为现代浏览器prefixes（就像这个例子 - How我再触发通过JavaScript WebKit的CSS动画？）

4 - The Animation Event listener functionality should append the prefixes for modern browsers (like in this example - How do I re-trigger a WebKit CSS animation via JavaScript?)

再次下面是我对这个的jsfiddle至今：

Again, Here is my jsfiddle on this so far: http://jsfiddle.net/mvkMH/23/

你的乡亲可以提供任何帮助将大大AP preciated！

Any help you folks could provide would be greatly appreciated!

在此先感谢！
Bizarro.Z

Thanks in advance!Bizarro.Z

推荐答案

创建一个jQuery函数与一个特定ID更改类的元素。
然后，你可以通过调用jQuery的code功能同步。

create a jQuery function that changes the class of an element with a specific ID.Then you can sync them by calling the function in the jQuery code.

这篇关于如何同步CSS3动画事件和事件侦听器与jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！