如何判断动画结束没有结束

JavaScript022

如何判断动画结束没有结束,第1张

<pre t="code" l="js">停止：$(this).stop(false,true).animate()//当前动画直接到达末状态；<pre t="code" l="js">判断是否处于动态：if(!$(element).is(":animated")){} else{}

<!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,

       el = document.createElement('surface'),

       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运动结束！我是回调函数，没有使用第三方类库！')

                                e. removeEventListener(transitionEvent,arguments.callee,false)//销毁事件

                                 

   })

 

   startFade = function() {

    e.className+= ' hide'

   }

  })()

</script>

</body>

</html><br><br>//兼容性 详情

因为FLASH动画，有可能是很多影片剪辑的嵌套，如果光靠程序完成判断，那是不靠谱的。

建议动画师最后执行依下JS的方法，实现告知功能。

as3的话

if (ExternalInterface.available)

{

ExternalInterface.call('JS方法的名字','参数')

}

例如：

if (ExternalInterface.available)

{

ExternalInterface.call('alert','hi完成了')

}

建议封装下程序：

/**

* 调用JS方法

* @param _Fun 方法名称

* @param _str 参数

* @example

* toJS('alert','成功调用JS方法')

*/

public static function toJS(_Fun:String, _str:String=''):void

{

trace('==============:', _str)

trace('ExternalInterface.available:', ExternalInterface.available)

if (ExternalInterface.available)

{

ExternalInterface.call(_Fun, _str)

}

}