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事件將在元素的每個樣式屬性值發生改變之后觸發一次。