CSS动画的停止与监听

      CSS动画的扩展性、易用性与性能都远超JS动画，但其可控制性(启动、暂停、重新启动)、生命周期的监听都远不如JS动画那么强大，但充分利用元素的style、class特性依旧可实现CSS动画的停止功能，并能利用新增的”transitionend”事件监听到动画何时结束。

      假定页面中存在如下HTML片段。

<button id="btnTrans">转变</button>
<button id="btnStop">停止</button>
<div class="container">
    <a class="banner" href="#">Hello,World!</a>
</div>

      给元素添加动画样式并添加动画终止状态。

 .banner {
    font-size : 12px;
    transition : font-size 3s ease-in 1s;
}
/* 动画终止状态 */
.font-change {
    font-size : 50px;
}

      注册按钮事件用于控制动画的启动，并监听动画的结束事件。

//  启动动画并监听动画结束
d3.select("#btnTrans").on("click", function() {
    d3.select(".banner")
      //    通过添加样式类名启动动画
      .classed("font-change", true)
      //    监听动画的结束事件
      .on("transitionend", function() {
          alert("动画结束!");
      });
});

      停止CSS动画共有两种方式，一种是通过内嵌样式样式控制，一种是通过删除动画样式的类名控制，如下。

//  注册停止动画按钮
d3.select("#btnStop").on('click', function() {
    d3.select(".banner")
      //    通过内嵌样式控制
      .style("transition", "none")
      //    通过删除样式的类名控制
      //.classed("font-changed", false)
});