animation动画结束后的回掉函数

今天做项目的时候在进度条结束的时候需要跳转页面，然后我就用了animation自带的自定义回调函数

该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。
点我开始动画

具体用法来自菜鸟教程：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 属性可以控制元素在水平方向上的位移
})