requestAnimationFrame 帧动画

作者: _君ruo知生 | 来源:发表于2020-05-21 16:37 被阅读0次

帧动画requestAnimationFrame
requestAnimationFrame 帧动画
速度版运动框架
[RN] requestAnimationFrame帧动画
前端学习笔记--requestAnimationFrame优化动
JS动画--requestAnimationFrame
wx.d.ts
requestAnimationFrame-制作逐帧动画
requestAnimationFrame 和setTimeou
requestAnimationFrame 帧函数

<html>
<head>
<meta charset="utf-8">
<title>修改代码，右边会自动显示结果</title>
<!--适应移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css样式-->
<style>
    body{background-color: #EBEBEB}
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
        transition: all.5s;
        transform: scale(0.8);
        opacity: 0;
    }
    .box-show{
        transform: scale(1);
        opacity: 1;
    }
    
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
<button class="button" type="submit">按钮</button>

<script type="text/javascript">
    $('.button').click(function(){
        var boxDom  = $('.box')[0];
        console.log(boxDom);
        if(!boxDom){
            var el = document.createElement('div');
            el.className = 'box';
            document.body.appendChild(el);
            nextFrame(_=>{
               $('.box').toggleClass('box-show')  
            })
        }else{
            $('.box').toggleClass('box-show')
            // nextFrame(_=>{
            //      document.body.removeChild(boxDom)
            // })
            setTimeout(_=>{
                document.body.removeChild(boxDom)
            },500)
        }
 
    })
    
 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
    function nextFrame(fn){
        requestAnimationFrame(_=>{
           requestAnimationFrame(fn)
        })
    }
</script>

</body>
</html>