开发笔记:如何用JavaScript捕获CSS3的动画事件

CSS3动画执行起来平滑且快速，但不像Javascript动画，你可以一帧一帧控制。幸运的是，你可以在任何一个元素上使用事件处理来决定动画的状态。同时它支持连续播放不同动画这种细粒度的控制。

来看下这个简单的CSS3动画：

1. #anim.enable







2. {







3.  -webkit-animation: flash 1s ease 3;







4.  -moz-animation: flash 1s ease 3;







5.  -ms-animation: flash 1s ease 3;







6.  -o-animation: flash 1s ease 3;







7.  animation: flash 1s ease 3;







8. }












10. /* animation */







11. @-webkit-keyframes flash {







12.  50% { opacity: 0; }







13. }












15. @-moz-keyframes flash {







16.  50% { opacity: 0; }







17. }












19. @-ms-keyframes flash {







20.  50% { opacity: 0; }







21. }












23. @-o-keyframes flash {







24.  50% { opacity: 0; }







25. }












27. @keyframes flash {







28.  50% { opacity: 0; }







29. }

当enable类应用于ID为 anim 的元素时，名为flash的动画将运行三次。每次运行持续一秒钟，在此过程中，元素会在其中淡出淡入。

动画运行时会触发三种类型的事件：

animationstart

1. var anim = document.getElementById("anim");







2. anim.addEventListener("animationstart", AnimationListener, false);

动画第一次启动时，animationstart 事件触发。

animationiteration

1. `anim.addEventListener("animationiteration", AnimationListener, false);`

animationinteration事件会在每一次新的动画执行过程中被触发，即除了第一次之外的每一个迭代过程。

animationend

1. `anim.addEventListener("animationend", AnimationListener, false);`

animationend事件会在动画结束时被触发。

浏览器兼容性

在撰写本文时，Firefox，Chrome，Safari，Opera和IE10支持CSS3动画和相关联的事件处理程序。此外，Opera，IE10和webkit浏览器使用前缀，并在一些情况下做出很棒的支持...

W3C 标准中 FirefoxwebkitOperaIE10animationstart animationstart webkitAnimationStart oanimationstart MSAnimationStart animationiteration animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration animationend animationend webkitAnimationEnd oanimationendMSAnimationEnd 等事件

前缀最简单的方法是使用自定义函数为所有前缀和非前缀名称调用addEventListener：

1. var pfx = ["webkit", "moz", "MS", "o", ""];







2. function PrefixedEvent(element, type, callback) {







3.  for (var p = 0; p code>

现在可以使用一行简单代码分配跨浏览器事件处理程序：

1. // animation listener events







2. PrefixedEvent(anim, "AnimationStart", AnimationListener);







3. PrefixedEvent(anim, "AnimationIteration", AnimationListener);







4. PrefixedEvent(anim, "AnimationEnd", AnimationListener);

事件对象

在上面的代码中，每当动画事件发生时，都会调用AnimationListener函数。事件对象作为单个参数传递。除了标准的属性和方法外，还提供：

• animationName：CSS3动画名称（即flash）




• elapsedTime：动画开始后以秒为单位的时间。

因此，我们可以检测flash动画结束的时间，例如

1. if (e.animationName == "flash" &&







2.    e.type.toLowerCase().indexOf("animationend") >= 0) {







3.    ...







4. }

这段代码就可以，例如，可以删除现有class或以特定顺序应用另一个CSS3动画。

更多来自本作者的内容

在Javascript演示中查看CSS3动画事件

演示页面显示一个按钮。当它被点击时，“enable”类被切换开始flash动画。当动画事件触发时，状态显示在控制台中。当动画结束时，“enable”类被删除，因此可以再次单击该按钮。

如果您在任何有趣的项目中使用动画事件捕获，可以告诉我们。

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。