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)
});