JavaScript中怎么实现DOM动画效果

JavaScript中怎么实现DOM动画效果，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联始终坚持【策划先行，效果至上】的经营理念，通过多达十多年累计超上千家客户的网站建设总结了一套系统有效的全网营销解决方案，现已广泛运用于各行各业的客户，其中包括：岗亭等企业，备受客户赞誉。

1. 让一个元素从左至右进行运动

var box = document.getElementById("box");

var t = null;

t = setInterval(function(){

})

运动的终止条件

t = setInterval(function(){终止条件}) // 元素的属性值 === 目标点

if(dom.attr === target){

clearInterval(t);

}

运动的三要素

1. 起始点

一个运动的起始点其实就是当前元素的位置，我们通过API获取当前元素的位置，让这个位置作为运动的起始。

1. 目标速度

DOM动画效果封装

单属性运动框架:

function move( ele , attr , target){

// 1. 关闭开启定时器;

clearInterval( ele.timer );

ele.timer = setInterval( function(){

// 2. 计算速度;

if(attr === "opacity"){

var iNow = parseInt(getComputedStyle(ele)[attr] * 100); //0 ~ 100

}else{

var iNow = parseInt(getComputedStyle(ele)[attr]); //100

}

var speed = (target - iNow) / 10;

// 3. 速度取整;

if(speed > 0){

speed = Math.ceil(speed);

}else{

speed = Math.floor(speed);

}

if(attr === "opacity"){

ele.style[attr] = (iNow + speed) / 100 ;

}else{

ele.style[attr] = iNow + speed + "px";

}

// 4. 终止条件;

if(iNow === target){

clearInterval(ele.timer);

}

} , 50)

看完上述内容，你们掌握JavaScript中怎么实现DOM动画效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！