JavaScript中怎么实现DOM动画效果，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
让一个元素从左至右进行运动
<div id="box"></div>
var box = document.getElementById("box");
var t = null;
t = setInterval(function(){
})
运动的终止条件
t = setInterval(function(){终止条件}) // 元素的属性值 === 目标点
if(dom.attr === target){
clearInterval(t);
}
运动的三要素
起始点
一个运动的起始点其实就是当前元素的位置，我们通过API获取当前元素的位置，让这个位置作为运动的起始。
目标速度
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动画效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
