如何同步CSS3动画事件和事件侦听器与jQuery [英] How to Sync CSS3 Animation Events and Event Listeners with jQuery

查看:115
本文介绍了如何同步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至今: http://jsfiddle.net/mvkMH/23/

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

下面是我想要做的事:
我有一个<含&LT #main 的ID;李&GT UL> 的带班 .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 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆