溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
