【CSS3-transition】过渡完成之后执行自定义处理

424 查看

背景

CSS3中引入了很多新的特性,其中一个就是trainsition,这个新特性让我们在一种样式转变为另一种样式时,无需使用Flash & Javascript。这个特性在越来越多的项目中被应用。

回放

在写自己博客程序中,由于全站采用Websocket or ajax进行'无延迟'通信,所以在header处添加了一个loader-bar,实时显示'进度'(很多网站应该都有这样的设计)。在加载完成之后需要隐藏这个loader-bar,但是因为用了CSS3的trainsition,所以之前我的做法是在增加进度条时,检测是否全部完成(宽度是否达到100%之类的),然后设置一个定时器,这个定时器需要调整到和transition-duration相适应。但是这样不优雅。

解决

其实很简单,只怪自己粗心没看到文档底部的更多相关,方案如下

element.addEventListener("transitionend", function() {
    // do something
}, true);

参考

  1. Detecting the completion of a transition

  2. TransitionEvent