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

2019-03-27 12:24:09 浏览数 (1)

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

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

代码语言：javascript复制
#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

代码语言：javascript复制
var anim = document.getElementById("anim");
anim.addEventListener("animationstart", AnimationListener, false);

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

animationiteration

代码语言：javascript复制
`anim.addEventListener("animationiteration", AnimationListener, false);`

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

animationend

代码语言：javascript复制
`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：

代码语言：javascript复制
var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
  for (var p = 0; p code>

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

代码语言：javascript复制
// animation listener events
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);

事件对象

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

  • animationName：CSS3动画名称（即flash）
  • elapsedTime：动画开始后以秒为单位的时间。

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

代码语言：javascript复制
if (e.animationName == "flash" && 
    e.type.toLowerCase().indexOf("animationend") >= 0) {
    ...
}

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

更多来自本作者的内容

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

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

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

往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货：CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包

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

javascript flash

0 人点赞