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>