現在若是我們要在動畫結束時候加一個事件該怎麼辦呢？ 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div { width: 100px; height: 100px; background: pink; transition: width 1s; - ...
現在若是我們要在動畫結束時候加一個事件該怎麼辦呢？
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div { width: 100px; height: 100px; background: pink; transition: width 1s; -moz-transition: width 1s; /* Firefox 4 */ -webkit-transition: width 1s; /* Safari and Chrome */ -o-transition: width 1s; /* Opera */ } 6 7 div:hover { width: 300px; } 8 </style> 9 </head> 10 <body> 11 <div id="demo"> 12 </div> 13 <br /> 14 <span id="msg"></span> 15 <p> 16 請把滑鼠指針移動到粉色的 div 元素上，就可以看到過渡效果。</p> 17 <p> 18 <b>註釋：</b>本例在 Internet Explorer 中無效。</p> 19 <script type="text/javascript"> 20 var demo = document.getElementById('demo'); 21 var msg = document.getElementById('msg'); 27 28 demo.addEventListener('webkitTransitionEnd', function () { 29 msg.innerHTML = '事件回調，當前原始寬度：' + window.getComputedStyle(demo).width; 30 }); 31 32 </script> 33 </body> 34 </html>
<就是這樣寫的！>
//捕捉webkitTransitionEnd事件 element.addEventListener('webkitTransitionEnd', end, false);
