以下は、パッケージの単純な運動である
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];
}
}
場合、単純な動き、上記の導入は、コードの重複を回避しながら、効果的に効率を向上させることができ、迅速に解決することができます