动画的原理:
就是利用定时器不断重复这个操作,停止动画则利用清除定时器来完成。
<style>
div{
position: absolute;
left: 0;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<html>
<div></div>
</html>
<script>
var div = document.querySelector('div')
var timer = setInterval(function(){
if(div.offsetLeft >= 400){
// 停止动画 本质就是停止定时器
clearInterval(timer)
}
div.style.left = div.offsetLeft + 5 + 'px'
},30)
</script>