【CSS3-transition】过渡完成之后执行自定义处理
背景
CSS3中引入了很多新的特性，其中一个就是trainsition,这个新特性让我们在一种样式转变为另一种样式时，无需使用Flash & Javascript。这个特性在越来越多的项目中被应用。
回放
在写自己博客程序中，由于全站采用Websocket or ajax进行'无延迟'通信，所以在header处添加了一个loader-bar，实时显示'进度'(很多网站应该都有这样的设计)。在加载完成之后需要隐藏这个loader-bar，但是因为用了CSS3的trainsition，所以之前我的做法是在增加进度条时，检测是否全部完成（宽度是否达到100%之类的），然后设置一个定时器，这个定时器需要调整到和transition-duration相适应。但是这样不优雅。
解决
其实很简单，只怪自己粗心没看到文档底部的更多相关，方案如下
element.addEventListener("transitionend", function() {
// do something
}, true);
参考
-
Detecting the completion of a transition
-
TransitionEvent
关键字：css3
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
