现在若是我们要在动画结束时候加一个事件该怎么办呢？
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);