JavaScript 是世界上最流行的腳本語言。 JavaScript 是屬於 web 的語言，它適用於 PC、筆記本電腦、平板電腦和移動電話。 JavaScript 被設計為向 HTML 頁面增加交互性。 許多 HTML 開發者都不是程序員，但是 JavaScript 卻擁有非常簡單的語法。幾乎每個人都有能力將小的 JavaScript 片段添加到網頁中。下面給大家分享下JavaScript教程全套視頻合集：DOM動畫效果。

DOM動畫效果

讓一個元素從左至右進行運動

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)