如何在JavaScript中捕获CSS3动画事件

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的动画将运行3次。 每次迭代持续一秒钟，在此期间元素逐渐淡出然后渐入。

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

animationstart

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

动画首次启动时会触发animationstart事件。

动画迭代

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

animationiteration事件在每个新动画迭代的开始（即除第一个迭代之外的每个迭代）的开始处触发。

动画结束

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

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

浏览器兼容性

在撰写本文时，Firefox，Chrome，Safari，Opera和IE10支持CSS3动画和关联的事件处理程序。 此外，Opera，IE10和Webkit浏览器使用前缀，并在一些情况下进行了一些适当的更改，以达到良好的效果……

W3C标准	火狐浏览器	网页套件	歌剧	IE10
animationstart	animationstart	webkitAnimationStart	动画开始	MSAnimationStart
动画迭代	动画迭代	webkitAnimationIteration	动画化	MSAnimationIteration
动画结束	动画结束	webkitAnimationEnd	烟酰胺	MSAnimationEnd

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

var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
	for (var p = 0; p < pfx.length; p++) {
		if (!pfx[p]) type = type.toLowerCase();
		element.addEventListener(pfx[p]+type, callback, false);
	}
}>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) {
    ...
}

该代码可以例如删除现有的类或以特定顺序应用另一个CSS3动画。

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

演示页面显示一个按钮。 单击时，将切换“启用”类，以启动Flash动画。 触发动画事件时，状态将显示在控制台中。 动画结束时，将删除“启用”类，以便可以再次单击该按钮。

让我知道您是否在任何有趣的项目中使用了动画事件捕获。

如果您喜欢阅读这篇文章，那么您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如针对真实世界的HTML5和CSS3 。

本文的评论已关闭。 对CSS有疑问吗？ 为什么不在我们的论坛上提问呢？

From: https://www.sitepoint.com/css3-animation-javascript-event-handlers/