以下是运动的简单封装
带有px的css属性和透明度,可以运动
背景色不可以
// 参数2被修改成了对象,那么在使用之前需要解析(遍历)
function move(ele,obj,cb){
clearInterval(ele.t);
ele.t = setInterval(() => {
// 假设状态为:可以清除计时器
var i = true;
// 因为在计时器中才开始使用到对象中的信息,所以在计时器中遍历
// 并提前换来的属性和目标变量
for(var attr in obj){
if(attr == "opacity"){
var iNow = getStyle(ele,attr) * 100;
}else{
var iNow = parseInt(getStyle(ele,attr));
}
let speed = (obj[attr] - iNow)/10;
speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
// 只要有一个属性到目标,就停了,不对
// 必须所有属性到目标,才能停
// 只要有一个属性没到目标,绝对不能停
// 用状态来标记到底要不要停止计时器
// 只要有一个属性没到目标:绝对不能清除计时器
if(iNow !== obj[attr]){
i = false;
}
if(attr == "opacity"){
ele.style.opacity = (iNow + speed)/100;
}else{
ele.style[attr] = iNow + speed + "px";
}
}
// 如果每次计时器执行结束,所有属性都执行了一遍之后,状态还是true,表示,没有被改成false,如果没有被改成false,表示没有属性没到终点,那么状态还是false就不清除
if(i){
clearInterval(ele.t);
// 用户决定在动画结束时要执行的功能,万一用户没传参,做个默认判断
if(cb){
cb();
}
// cb && cb();
}
}, 30);
}
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
进行简单运动时 ,将上述引进可以快速解决,同时避免了重复代码,能够有效提高效率