animation关键帧动画易错点-CSDN博客

本文链接：https://blog.csdn.net/2301_79200042/article/details/143834730

animation动画易错点:

animation动画结束后默认是保持动画执行前的原始状态而不是最后一帧,要保持最后一帧需要设置动画填充模式为forwards
如果有多个动画,必须要重新定义关键帧,不能在原有动画基础上reverse, (出场动画不能直接在入场动画上面reverse,需要重新定义关键帧@keyframes)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation关键帧动画</title>
    <style>
        *{margin:0;padding:0}
        #d1{background:darkred;width: 200px;height: 200px;margin-top: 20px;margin-left: -200px;}
        #d1:hover{animation-play-state: paused;}  /*鼠标悬浮在上面就终止动画播放*/
        /* 设置动画来回切换,animation-direction:alternate只有在指定了播放次数的条件下才会生效*/
        /*.enter{animation:anim 2s infinite alternate;}*/

        .enter{animation:anim 0.5s forwards;
            /*animation动画结束时默认是回到动画执行前的原始状态,不会停留在最后一帧*/
            /*animation-fill-mode: forwards 单独控制动画填充模式的方式*/
        }
        /* 如果设置多个动画,要创建新的关键帧@keyframes,
        不能在原有动画基础上reverse会有bug,但是vue可以*/
        /*.leave{animation:anim 0.5s reverse;} */   /* 错误写法! */

        .leave{animation:anim2 0.5s reverse;}  /* 正确写法,多个动画需要重新定义关键帧后再使用 */
        /* 入场动画关键帧 */
        @keyframes anim {
            0%{opacity:0;transform:translateX(0%)}
            100%{opacity:1;transform:translateX(100%)}
        }
        /* 出场动画关键帧 */
        @keyframes anim2 {
            0%{opacity:0;transform:translateX(0%)}
            100%{opacity:1;transform:translateX(100%)}
        }
    </style>
</head>
<body>
<button class="btn">animation关键帧动画及classList操作class</button>
<div id="d1"></div>
</body>
<script>
    let btn=document.getElementsByClassName('btn')[0]
    let d1=document.getElementById('d1')
    btn.addEventListener('click',function(){
        // classList对象的contains方法用来查询是否存在某个class
        if(d1.classList.contains("enter")){
            d1.classList.remove('enter')
            d1.classList.add('leave')
        }else{
            d1.classList.remove('leave')
            d1.classList.add('enter')
        }
    })
</script>
</html>

相关易混淆的概念(transform变形,translate位移,transition过渡动画,animation关键帧动画):

transform变形,是css属性,属性值有位移translate/旋转rotate/缩放scale/倾斜skew

①, 位移translate,包括translate(x轴移动距离,y轴移动距离),translateX(x),translateY(y)

②, 旋转rotate, 包括rotate(旋转角度),rotateX(),rotateY()

③, 缩放scale,包括scale(),scaleX(),scaleY()

④, 倾斜skew,包括skew(倾斜角度),skewX(),skewY()
动画属性,包括过渡动画transition和关键帧动画animation,关键帧动画必须结合@keyframs来使用,需要指定动画名称