随笔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);
posted @ 2016-03-25 09:59  小货盘啦  阅读(164)  评论(0编辑  收藏  举报