如何同步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
类的 .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 ;-)
-
点击.box元素后,请为任何.move-x和.move-y类检查#main
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屋!