webkitTransitionEnd事件

今天重新看了一下bootstrap里面的那些插件,打算写一套简化版的插件,看到里面一个bootstrap-transition.js,不明所以,细看之后才知道是一个判断浏览是否支持transition转换的插件,若支持则在动画结束时执行一些代码。否则使用另外一个事件。

在WebKit引擎的浏览器中,当CSS 3的transition动画执行结束时,触发webkitTransitionEnd事件。在CSS 3中,使用如下所示的样式代码定义transition动画。

<style>
.target{
    width: 100px;
    height: 100px;
    background: #ff0000;
}

.target{ -webkit-transition: all 0.25s ease-in; }
.target.on{ 
    -webkit-transform: translate(100px,0);
}
</style>

上面这段代码执行功能同样为在0.5秒内将元素向右移动100像素后将其返回。我们可以在这个动画结束时触发的webkitTransitionEnd事件中执行一些代码,例如显示动画已执行结束,以及动画的执行次数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>移动手机web页面多次触发webkitTransitionEnd的问题</title>
<style>
.target{
    width: 100px;
    height: 100px;
    background: #ff0000;
}

.target{ -webkit-transition: all 0.25s ease-in; }
.target.on{ 
    -webkit-transform: translate(100px,0);
}
</style>
<div class="viewArea anime">
        <div class="target" style="margin:0px;"></div>
        <p class="count"></p>
        <p class="trnstnCount"></p>
        <a href="#" class="btn01" style="color:blue">执行animation动画</a>
    </div>
<script>
function sample() {
    var target = document.querySelector('.target'),
      count = document.querySelector('.count'),
      btn = document.querySelector('.btn01'),
      trnstnCount = document.querySelector('.trnstnCount'),
      countNum = 0,
      trnstnCountNum = 0;
      
    target.addEventListener('webkitTransitionEnd', end, false);     
    btn.addEventListener('click', tStart, false);
    function tStart(e) {
        e.preventDefault();
        countNum ++;
        target.classList.add('on');
        count.innerHTML = "动画执行次数:" + countNum;
        return false;
    }
    function end() {
        trnstnCountNum ++;
        target.classList.remove('on');
        trnstnCount.innerHTML = "webkitTransitionEnd事件触发次数:" + trnstnCountNum;
        return false;
    }
}
document.addEventListener('DOMContentLoaded', sample, false);
</script>
</head>
<body>
</body>
</html>

从执行结果中我们可以看出,在每个动画的执行过程中,webkitTransitionEnd事件的触发了2次,这是因为webkitAnimationEnd事件只在元素向右移动,然后向左返回之后触发一次,而webkitTransitionEnd事件将在元素向右移动之后触发一次,在元素向左返回之后再触发一次。

接下来,我们为元素多指定一个opacity(透明度)样式属性。

结论是:如果多使用一个样式属性,在每个动画执行的过程中webkitTransitionEnd事件的触发次数将多增加两次。也就是说webkitTransitionEnd事件将在元素的每个样式属性值发生改变之后触发一次。

参考:http://www.cnblogs.com/qgd87/p/3386024.html

原创文章:webkitTransitionEnd事件 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/webkittransitionend.html)
评论已关闭。