如何同步CSS3动画事件和事件侦听器与jQuery [英] How to Sync CSS3 Animation Events and Event Listeners with 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至今： http://jsfiddle.net/mvkMH/23/

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

下面是我想要做的事：
我有一个＆LT;含＆LT 与 #main 的ID;李＆GT UL＆GT; 的带班 .box的的。当用户点击任何 .box的它添加 .move-Y 类（ $这） - 它也同时增加了 .move-X 类，其余的列表项。当用户点击另一个 .box的，所有现有的 .move-y和.move-X 类被替换 .move-Y-RVS和.move-X-RVS 类。使用CSS3动画事件把一切都全，同时完美地同步增长。

Here is what I'm trying to do: I have a <ul> with an id of #main containing <li>'s with a class of .box. When a user clicks on any .box it adds the .move-y class to ($this) - it also simultaneously adds the .move-x class to the remaining list items. When the user clicks another .box, all the existing .move-y and .move-x classes are replaced with .move-y-rvs and .move-x-rvs classes. All the while using CSS3 Animation events to keep everything perfectly synced up.

为什么CSS3动画活动？

• CSS3动画快速在iOS


• CSS3动画通过jQuery触发允许你'重启'，如果它已经被播放的动画（的 https://css-tricks.com/restart-css-animation/ ）


• 在理论上，通过使用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（就像这个例子 - <一个href=\"http://stackoverflow.com/questions/4797675/how-do-i-re-trigger-a-webkit-css-animation-via-javascript\">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至今： http://jsfiddle.net/mvkMH/23/

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！