随笔1

现在若是我们要在动画结束时候加一个事件该怎么办呢？

 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);