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

Posted 2021-04-09 前端先锋

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”类被删除，因此可以再次单击该按钮。

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

---

往期精选文章

---

---

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