<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> #foo{ border-radius: 50px; width: 50px; height: 50px; background-color: #c44; position: absolute; top:-100px; left: -100px; -webkit-transition:all 1s;//1S完成移動 } </style> </head> <body> <div id="foo"></div> <script type="text/javascript"> var f=document.getElementById('foo'); document.addEventListener('click',function(ev){ f.style.left=(ev.clientX-25)+'px'; f.style.top=(ev.clientY-25)+'px'; },false); </script> </body> </html>
另外,可對事件進行監聽:
el.addEventListener("webkitTransitionEnd",updateTransition,true);