requestAnimationFrame动画

最新推荐文章于 2024-08-18 10:54:05 发布

想一个不重名的名字

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量64

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_47099087/article/details/131341595

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这段代码定义了一个div元素，设置了其初始宽度和高度，并用aqua作为背景色。JavaScript部分包含两个函数：animation()用于增加div的高度并利用requestAnimationFrame进行动画效果，startAnimation()用于启动动画，而stopAnimation()则用于停止动画。通过调用startAnimation()，div的高度会持续增加形成动画效果。

摘要由CSDN通过智能技术生成

<html>
    <style>
        div {
            width: 500px;
            height: 200px;
            background-color: aqua;
        }
    </style>
    <div>

    </div>
    <script>
        let anmationId 
        const el = document.querySelector('div')
        function anmiation(){
            const offsetHeight = el.offsetHeight
            el.style.height = offsetHeight + 20+'px'
            anmationId= requestAnimationFrame(anmiation)
        }
        function startAnmation(){
            if (!anmationId) {
                anmiation()
            }
        }
        startAnmation()
        function stopAnmation(){
            cancelAnimationFrame(anmationId)
            anmationId = null
        }
    </script>
</html>