如何同步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/

这是我想要做的：
我有一个< ul> 包含 .box 类的 > #main 当用户点击任何 .box 时，它会将 .move-y 类添加到 $ this） - 它还同时将 .move-x 类添加到剩余的列表项中。当用户单击另一个 .box 时，所有现有的 .move-y和.move-x .move-y-rvs和.move-x-rvs 类。

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元素后，请为任何.move-x和.move-y类检查#main

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:

• 用move-x-rvs和.move-y-rvs替换这些类


• 使用.move-x-rvs将css 动画事件<和.move-y-rvs类


• 在 AnimationEnd事件上，删除.move-x-rvs和.move-y-rvs类


• 将 AnimationName 设置为空字符串（如果再次点击则会重置css3动画以便重新播放）


• 现在添加.move-y class to $（this）


• 将.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类to $（this）


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

4 - 动画事件侦听器功能应附加现代浏览器的前缀（如本示例中的如何通过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/

任何您可能提供的帮助都将非常感谢！

Any help you folks could provide would be greatly appreciated!

提前感谢！
Bizarro.Z

Thanks in advance! Bizarro.Z

推荐答案

创建一个jQuery函数，更改具有特定ID的元素的类。
然后你可以通过调用jQuery代码中的函数来同步它们。

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屋！