アニメーション終了後のリターン関数

2985 ワード

今日はプロジェクトをする時、プログレスバーが終わる時にページを移動します.そして、アニメーションが持っているカスタマイズのコールバック関数を使いました.




    (runoob.com)




addEventListener() DIV "animationstart", "animationiteration" "animationend" 。

var x = document.getElementById("myDIV") // JavaScript function myFunction() { x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari Opera x.style.animation = "mymove 4s 2"; } // Chrome, Safari Opera x.addEventListener("webkitAnimationStart", myStartFunction); x.addEventListener("webkitAnimationIteration", myIterationFunction); x.addEventListener("webkitAnimationEnd", myEndFunction); x.addEventListener("animationstart", myStartFunction); x.addEventListener("animationiteration", myIterationFunction); x.addEventListener("animationend", myEndFunction); function myStartFunction() { this.innerHTML = "animationstart - "; this.style.backgroundColor = "pink"; } function myIterationFunction() { this.innerHTML = "animationiteration - "; this.style.backgroundColor = "lightblue"; } function myEndFunction() { this.innerHTML = "animationend - "; this.style.backgroundColor = "lightgray"; }
具体的な使い方は初心者教程から来ています.http://www.runoob.com/jsref/event-animationiteration.html
 const box=document.querySelector('.box');
                let value=0;
                const add=()=>{
                    requestAnimationFrame(add);
                    value+=5;
                    box.style.transform=`translateX(${value}px)`
                }
requestAnimationFrame(add);
function animate(start, end, time, callback) {
    let startTime = performance.now() //         
    console.log(performance.now())
    let differ = end - start //       
    //             
    function loop() {
        raf = requestAnimationFrame(loop) //                
        const passTime = performance.now() - startTime //             
        let per = passTime / time //          
        if (per >= 1) { //         
              per = 1 //         
              cancelAnimationFrame(raf) //     
        }
        const pass = differ * per //          *              
        callback(pass) //       ,       
    }
    let raf = requestAnimationFrame(loop) //                
}
let box = document.querySelector('.box');
animate(0, 400, 1000, value => {
    box.style.transform = `translateX(${value}px)` //             css    transform                  
})