目录
一、动画原理
通过定时器setInterval()不断移动盒子距离,获取盒子当前位置offsetLeft,让盒子在当前位置加上移动距离(自己设定),利用定时器不断重读这个操作,加一个定时器结束的条件。
var div = document.querySelector('div');
var time = setInterval(function() {
if (div.offsetLeft >= 400) { //结束的条件
//停止动画本质是停止定时器
clearInterval(time);
}
div.style.left = div.offsetLeft + 1 + 'px';//每次移动距离1,left有单位所以拼接px
}, 30);
二、简单动画函数封装
如果一个页面中有多个元素都需要添加动画,我们一个个添加太麻烦,会有很多代码,我们可以将动画封装为一个函数,我们哪个元素使用就去调用。
封装函数需要两个参数,一个是动画对象,另一个是移动到的距离(目标)
f