壮壮

如何用JavaScript捕获CSS3的动画事件

原文链接: www.sitepoint.com

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

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

#anim.enable
{
  -webkit-animation: flash 1s ease 3;
  -moz-animation: flash 1s ease 3;
  -ms-animation: flash 1s ease 3;
  -o-animation: flash 1s ease 3;
  animation: flash 1s ease 3;
}

/* animation */
@-webkit-keyframes flash {
  50% { opacity: 0; }
}

@-moz-keyframes flash {
  50% { opacity: 0; }
}

@-ms-keyframes flash {
  50% { opacity: 0; }
}

@-o-keyframes flash {
  50% { opacity: 0; }
}

@keyframes flash {
  50% { opacity: 0; }
}

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

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

animationstart

var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

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

animationiteration

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

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

animationend

`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:

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
  for (var p = 0; p code>

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

// animation listener events
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);

事件对象

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

  • animationName:CSS3动画名称(即flash

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

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

if (e.animationName == "flash" && 
    e.type.toLowerCase().indexOf("animationend") >= 0) {
    ...
}

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

###更多来自本作者的内容

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

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

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

如果你喜欢阅读这篇文章,你会喜欢Learnable——从博主那里学习新鲜的技能和技巧。会员可立即访问所有站内的电子书和在线课程,如HTML5和CSS3 For Real World.

文章的评论已关闭。有关于CSS3的问题?为何不来我们的论坛