做了個類似jquery的動畫函數(shù)封裝
gitDemo =>https://github.com/LanHai1/animation

思路

• 三參數(shù)
  el 動畫元素
  attrs 動畫屬性{key:value}
  callback 回調(diào)函數(shù)
• 1- 每次調(diào)用前先清除動畫定時器 el.timeId
• 2- 開啟定時器
• 3- 聲明一個flag 屬性是否全部到達目標(biāo)點
• 4- forin attrs
  判斷key 是否是透明度 處理
  獲取元素當(dāng)前狀態(tài) * 100
  元素目標(biāo)狀態(tài) * 100
  每次執(zhí)行步數(shù)
  (目標(biāo)位置-當(dāng)前位置)/10
  目標(biāo)大于當(dāng)前 向上取整 Math.ceil
  目標(biāo)小于當(dāng)前 向下取整 Math.floor
  當(dāng)前位置 += 每次執(zhí)行步數(shù)
  當(dāng)前位置 / 100
  設(shè)置元素樣式
  判斷是否還有值未到達目標(biāo)點
  (target / 100 != current)
  flag = false
  其他屬性處理
  獲取元素當(dāng)前狀態(tài) => 取整
  元素目標(biāo)狀態(tài)
  每次執(zhí)行步數(shù)
  (目標(biāo)位置-當(dāng)前位置)/10
  目標(biāo)大于當(dāng)前 向上取整 Math.ceil
  目標(biāo)小于當(dāng)前 向下取整 Math.floor
  當(dāng)前位置 += 每次執(zhí)行步數(shù)
  設(shè)置元素樣式
  判斷是否還有值未到達目標(biāo)點
  (target != current)
  flag = false
• 5- 判斷是否全部到達目標(biāo)點
  清除動畫定時器 el.timeId
  判斷callback是否是函數(shù)
  調(diào)用callback

xmind圖解

        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
        
        .box1 {
            width: 200px;
            height: 200px;
            background-color: hotpink;
            position: absolute;
        }

結(jié)構(gòu)

    <input type="button" value="點擊400" id="btn1">
    <input type="button" value="點擊800" id="btn2">
    <div class="box"></div>
    <div class="box1"></div>

行為

let box = document.querySelector(".box");
let box1 = document.querySelector(".box1");

/**
 * 根據(jù)id獲取元素
 * @param {string} id 
 */
let $ = id => document.getElementById(id);

$("btn1").onclick = function() {
    animation_s(box, {
        width: 300,
        height: 600
    }, () => {
        animation_s(box, {
            left: 100,
            opacity: 0.3
        }, () => {
            animation_s(box1, {
                left: 500,
                height: 10
            })
        })
    })
}
$("btn2").onclick = () => {
    animation_s(box1, {
        left: 500,
        height: 10
    })
}

/**
 * 緩動動畫
 * @param {element} el 
 * @param {attributeJson{key:value}} attrs 
 * @param {fn} callback 
 */
function animation_s(el, attrs, callback) {
    // 每次調(diào)用前先清除已有的定時器
    clearInterval(el.timeId);
    el.timeId = setInterval(() => {
        // 全部到達目標(biāo)點
        let flag = true;
        for (const key in attrs) { // 還需考慮其他屬性的處理 如background-color...
            if (key == "opacity") { // 透明度處理
                // 元素當(dāng)前狀態(tài)
                let current = +(window.getComputedStyle(el)[key]) * 100;
                // 元素目標(biāo)狀態(tài)
                let target = attrs[key] * 100;
                // 每次執(zhí)行步數(shù)
                // 目標(biāo)大于當(dāng)前 向上取整 => 目標(biāo)小于當(dāng)前 向下取整
                let temp = target > current ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);
                current += temp;
                current = current / 100;
                // 設(shè)置元素樣式
                el.style[key] = `${current}`;
                // 判斷是否全部到達目標(biāo)點
                if (target / 100 != current) {
                    flag = false;
                }
            } else {
                // 元素當(dāng)前狀態(tài)
                let current = parseInt(window.getComputedStyle(el)[key]);
                // 元素目標(biāo)狀態(tài)
                let target = attrs[key];
                // 每次執(zhí)行步數(shù)
                // 目標(biāo)大于當(dāng)前 向上取整 => 目標(biāo)小于當(dāng)前 向下取整
                let temp = target > current ? Math.ceil((target - current) / 10) : Math.floor((target - current) / 10);
                current += temp;
                // 設(shè)置元素樣式
                el.style[key] = `${current}px`;
                // 判斷是否全部到達目標(biāo)點
                if (target != current) {
                    flag = false;
                }
            }
        }
        if (flag) {
            clearInterval(el.timeId);
            // 回調(diào)函數(shù)
            if (callback instanceof Function) {
                callback();
            }
        }
    }, 20)
}