分别实现：css动画、js动画、vue动画

一、使用css3实现动画

css3动画的核心是定义transition或 keyframes 两种。

keyframes：设置多个关键帧来控控制不懂时间下动画对象属性的值，（可循环的）

transition：自动完成不同状态的平滑过度，不管中间状态。（一次性的）

transition 设置动画

一次性的操作，在 ‘交互操作’ 的样式中，添加transition即可

举例说明：

 .demo{
        background-color: blueviolet;
        width: 100px;
        height: 100px;
        margin: 0 auto;
        
    }
.demo:hover{
        background-color: aquamarine;
        width: 200px;
        transition: all 2s ; /*要变化的样式名，持续时间，必须写！ */
    }

transition属性为：

/* 用来设置动画的属性 */
transition-property: width, height, background-color;

/* 用来设置动画执行的时长 */
transition-duration: 2s;

/* 用来进行延时设置 */
transition-delay: 0s;

/* 用来设置动画的执行方式，linear表示线性 ,更多效果请查看 https://easings.net/ */
transition-timing-function: linear;

以上四个属性可以写成综合属性：

/*transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;*/
 transition: all 3s linear 0s;

以下是拓展，可看可不看：

高级动画 = transition +  更高级的样式（ 2d转换 / 3d转换 ）

2d转换：旋转、缩放、位移、

/* 旋转 */
/* transform:rotate(角度deg) */
transform: rotate(50deg) 

/* 缩放 */
/* transform:scale(x轴缩放的倍数,y轴缩放的倍数) */
transform: scale(2,0.5) 

/* 位移 */
/* transform:translate(水平位移,垂直位移) */
transform: translate(-50%,50px) 

3d转换：旋转、位移、...（透视、3d呈现）

/* 旋转 */
transform: rotateX(360deg) /*rotateX：绕x轴旋转360度 */
transform: rotateY(50deg)
transform: rotateZ(50deg)  

/* 位移 */
transform: translateX(50px) /*transform:translate(沿x轴位移，左-右+) */
transform: translateY(50px)
transform: translateZ(50px)

@keyframes 设置动画

css样式中添加animation 、@keyframes 如下

.box{
        width: 100px;
        height: 100px;
        margin: 0 auto;
        /* animation：关键帧名字 持续时间 线性 循环 延迟时间 关键帧from与to反转 */
        animation: name 2s linear infinite 1s reverse;
        
    }
 @keyframes name {
        from{background-color: green}
        to{background-color: yellow;}
    }

二、JS实现动画（不建议）

<div class="app">
        <div class="box" @click="click" :style="{width:width+'px',height:height+'px',backgroundColor:'red'}"></div>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    width: 100,
                    height: 100,
                    timer: null
                }
            },
            methods: {
                click() {
                    this.timer = setInterval(() => {
                        if (this.width >= 200) return
                        this.width++
                        this.height++
                    }, 50)
                }
            },
        })
        app.mount('.app')
    </script>

三、vue实现动画

6种css class ，如何实现动画？

1. 确保vue框架正确的引入了，2.x及以上版本
2. 在需要添加过渡效果的元素上外添加标签<transition>或<transition-group>。包裹着过度的元素，如果有多个过度的话，为标签添加name="{自定义类名前缀}"属性来区分，apear挂到页面可显示动画
3. 给元素添加状态,可用是v-if,v-show,数组增减等…
4. 定义过度动画每个状态的css属性：进入前后v-enter-(active/from/to)…，退出前后v-leave…
5. 改变元素状态，查看动画效果 @keyframes 关键帧名{} 

html部分：

<transition name="hello" appear>
       <h1  v-show="isShow">你好呀</h1>
</transition>

<transition-group name="hello" appear>
       <h1  v-show="isShow" key="1">你好呀</h1> /*必须有key*/
       <h1  v-show="isShow" key="2">哈喽~ </h1>
</transition-group>

css部分：

.hello-enter-active{animation: donghua 2s linear}
.hello-leave-active{animation:donghua 2s reverse}

@keyframes donghua {
    from{background-color:  green;}
    to{background-color:  yellow;}
    }

JavaScript部分：

data(){return {
        isShow:true,
    }}

集成第三方动画：查看Animate.css 动画库

1、安装   npm install animate.css --save 

2、引入   import 'animate.css';

3、使用 ，<transition >中，name必须是：animate__animated animate__bounce

                 <transition >中，添加enter-active-class 和 leave-active-class属性

<transition name="animate__animated animate__bounce" appear enter-active-class='animate__swing' leave-active-class='animate__swing'>
       <h1  v-show="isShow">你好呀</h1>
</transition>