javascript判断css3动画结束 css3动画结束的回调函数

css3 的时代，css3--动画一切皆有可能；

传统的js 可以通过回调函数判断动画是否结束；即使是采用CSS技术生成动画效果，JavaScript仍然能捕获动画或变换的结束事件；

transitionend事件和animationend事件标准的浏览器事件，但在WebKit浏览器里你仍然需要使用webkit前缀，所以，我们不得不根据各种浏览器分别检测事件


var transitions = {

       'transition':'transitionend',

       'OTransition':'oTransitionEnd',

       'MozTransition':'transitionend',

       'WebkitTransition':'webkitTransitionEnd'

     }

下面附上源代码：


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>suface   js判断css动画是否结束</title>

</head>

<body>

<p>一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持。<br> </p>

<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: .5s;*/

transition-duration:3s;

}

  .sample.hide {

opacity: 0;

}

</style>

<div class="sample">css3动画过度慢慢隐藏（transition-duration:3s;）</div>

<p><button onclick="this.style.display='none';startFade();">慢慢消退，检测结束事件</button></p>

<script>             

                   (function() {

   var e = document.getElementsByClassName('sample')[0];

   function whichTransitionEvent(){

       var t;

       var el = document.createElement('fakeelement');

       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';

   }

  })();<br></script>

</body>

</html>

以上就是本文所述的关于javascript判断CSS3动画结束的方法，希望大家能够喜欢

基础教程