JavaScript中怎么實(shí)現(xiàn)DOM動(dòng)畫效果

JavaScript中怎么實(shí)現(xiàn)DOM動(dòng)畫效果，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

1. 讓一個(gè)元素從左至右進(jìn)行運(yùn)動(dòng)

<div id="box"></div>

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

var t = null;

t = setInterval(function(){

})

運(yùn)動(dòng)的終止條件

t = setInterval(function(){終止條件}) // 元素的屬性值 === 目標(biāo)點(diǎn)

if(dom.attr === target){

clearInterval(t);

}

運(yùn)動(dòng)的三要素

1. 起始點(diǎn)

一個(gè)運(yùn)動(dòng)的起始點(diǎn)其實(shí)就是當(dāng)前元素的位置，我們通過API獲取當(dāng)前元素的位置，讓這個(gè)位置作為運(yùn)動(dòng)的起始。

1. 目標(biāo)速度

DOM動(dòng)畫效果封裝

單屬性運(yùn)動(dòng)框架:

function move( ele , attr , target){

// 1. 關(guān)閉開啟定時(shí)器;

clearInterval( ele.timer );

ele.timer = setInterval( function(){

// 2. 計(jì)算速度;

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)

看完上述內(nèi)容，你們掌握J(rèn)avaScript中怎么實(shí)現(xiàn)DOM動(dòng)畫效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！