移动手机web页面多次触发webkitTransitionEnd的问题
webkitTransitionEnd事件
在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(透明度）样式属性，代码如下所示：
<style>
.target{
width: 100px;
height: 100px;
background: #ff0000;
}
.target{ -webkit-transition: all 0.25s ease-in; }
.target.on{
-webkit-transform: translate(100px,0);
opacity: 0.5;
}
</style>
<!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); opacity: 0.5; } </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事件的触发次数将多增加两次。也就是说webkitTransitionEnd事件将在元素的每个样式属性值发生改变之后触发一次。
