animation动画结束后的回掉函数

最新推荐文章于 2024-08-30 20:02:54 发布

慧、新

最新推荐文章于 2024-08-30 20:02:54 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： css3 js

本文链接：https://blog.csdn.net/Endeavor_No1/article/details/80171760

js 同时被 2 个专栏收录

54 篇文章

订阅专栏

css3

7 篇文章

订阅专栏

本文介绍了一种在动画结束时触发页面跳转的方法。利用HTML、CSS和JavaScript实现动画效果，并通过自定义回调函数控制动画事件。文章还提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style> 
#myDIV {
    margin: 25px;
    width: 550px;
    height: 100px;
    background: orange;
    position: relative;
    font-size: 20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}
@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}
</style>
</head>
<body>

<p>该实例使用了 addEventListener() 方法为 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p>
<div id="myDIV" onclick="myFunction()">点我开始动画</div>
<script>
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";
}
</script>

</body>
</html>

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