js检测css3动画是否执行完毕代码实例

快乐打工仔 分类:实例代码

由于硬件的进步,现在css3虽然说不上已经达到普及的程度,起码也可以说应用已经非常广泛。

css3能够实现流畅的动画效果,在实际应用中可能需要有这样的效果,那就是能够检测动画执行完毕进而执行相应的代码。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.sample{
  width:200px;
  height:200px;
  border:1px solid green;
  background:lightgreen;
  opacity:1;
  margin-bottom:20px;
  transition-property:opacity;
  transition-duration:3s;
}
.sample.hide{
  opacity:0;
}
</style>
<script>
window.onload=function(){
  var obt=document.getElementById("bt");
  (function() {
    var e=document.getElementsByClassName('sample')[0];
    function whichTransitionEvent(){
      var t;
      var el=document.createElement('antzone');
      var transitions = {
        'transition':'transitionend',
        'OTransition':'oTransitionEnd',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
      }
      for(t in transitions){
        if( el.style[t] !== undefined ){
          return transitions[t];
        }
     }
   }
   var transitionEvent = whichTransitionEvent();
   transitionEvent && e.addEventListener(transitionEvent, function() {
     alert('css3动画结束');
   });
   startFade = function() {
     e.className+= ' hide';
   }
  })();
  obt.onclick=function(){
    this.style.display='none';
        startFade();
  }
}
</script>
</head>
<body>
<div class="sample"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下他的实现过程。

一.代码注释:

(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。(2).var obt=document.getElementById("bt"),获取id属性值为bt的元素对象,这里就是按钮。

(3).(function() {})()一个匿名自执行函数。

(4).var e=document.getElementsByClassName('sample')[0],获取class属性值为sample集合中的第一个元素。

(5).function whichTransitionEvent(){},此函数实现f返回对象的事件名称。

(6).var t,声明一个变量,会在后来的for循环中使用。

(7) .var el=document.createElement('antzone'),创建一个元素对象。

(8).var transitions = {

  'transition':'transitionend',

  'OTransition':'oTransitionEnd',

  'MozTransition':'transitionend',

  'WebkitTransition':'webkitTransitionEnd'

},此对象直接量中存储的是对应的事件名称,大家可能都知道由于浏览器的兼容问题css3的属性可能需要在属性前面加上浏览器的标志,比如-webkit-transform-style或者-moz-transform-style等,这里的动画事件transitionend也是如此。

(9).for(t in transitions){

  if( el.style[t] !== undefined ){

    return transitions[t];

  }

},前面创建的el元素其实就是用来检测支持何种形式的transitionend事件,找出对应的然后返回。

(10).var transitionEvent = whichTransitionEvent(),返回事件名称。

(11).transitionEvent && e.addEventListener(transitionEvent, function() {

  alert('css3动画结束');

}),注册事件处理函数。

(12).startFade = function() {

  e.className+= ' hide';

},此函数可以为元素再添加一个class样式类,新添加的样式类可以设置元素透明度为0。

二.相关阅读:

(1).getElementsByClassName()方法可以参阅getElementsByClassName()一章节。

(2).document.createElement()方法可以参阅document.createElement()一章节。

(3).addEventListener()方法可以参阅addEventListener()一章节。

(4).className可以参阅js className一章节。

(5).transitionend事件可以参阅javascript transitionend事件一章节。

回复

我来回复
  • 暂无回复内容