Vue怎么做动画和过渡效果？

1.通过添加或删除 类名/行内样式 来实现css做动画或过渡效果:

 <style>
        @keyframes leftToRight{
            from{
                transform: translateX(-100px);
            }
            to{
                transform: translateX(0px);
            }
        }
        .animation{
            animation: leftToRight 1s;
        }
        .transition{
            transition: all 3s;
        }
        .colorChange{
            color:green;
        }
    </style>
 <script>
        // 通过添加或删除类名来实现css做动画或过渡效果
        const app = Vue.createApp({
            data() {
                return {
                   animate:{
                    //    属性值为true则被选择
                       animation:true,
                       transition:true,
                       colorChange:false,
                   },
                //    行内样式
                   styleObj:{
                       background:"yellow",
                   }
                }
            },
            methods: {
                changeColor(){
                    // 文字颜色切换过渡效果
                    this.animate.colorChange = !this.animate.colorChange;
                    // 背景颜色切换过渡效果
                    if(this.styleObj.background === "yellow"){
                        this.styleObj.background = "pink"
                    }else{
                        this.styleObj.background = "yellow"
                    }
                }
            },
            template:`
            <div :class="animate" :style="styleObj">hello word</div>
            <button @click="changeColor">切换</button>`
        });
        app.mount("#root");
    </script>

2.使用vue的动画封装:transition来实现动画效果：

 <style>
        @keyframes sharkIn{
            from{
                transform: translateX(-30px);
            }
            to{
                transform: translateX(0);
            }
        }
        @keyframes sharkOut{
            from{
                transform: translateX(0);
            }
            to{
                transform: translateX(-30px);
            }
        }
        /* 配合transition标签写一些样式 */
        .v-enter-from,.v-leave-to{
            opacity: 0;
            color: green;
        }
        /*  .v-enter-active是在整个进入动画过程的效果的样式*/
        .v-enter-active{
            animation: sharkIn 2s;
            transition: all 2s;
        }
        .v-leave-active{
            animation: sharkOut 2s;
            transition: all 2s;
        }
        .v-enter-to, .v-leave-from{
            opacity: 1;
            color: red;
        }
    </style>

 <script>
        // 单元素/单组件的入场出场动画
        const app = Vue.createApp({
            data() {
                return {
                    show:true,
                }
            },
            methods: {
                handleClick(){
                    this.show = !this.show;
                }
            },
            // 使用<transition>标签将要做动画的元素包裹
            //  修改类名和自定义类名： 
            // 1.<transition name="x">,则相应的样式的类名要从v-开头改为x-开头；
            // 2.<transition enter-active-class="ea">,则样式中的.v-enter-active就要写成.ea
            //  自定义类名的好处：方便引用第三方动画 
            //  type="transition"的意思是：
            // 如果执行过程中，动画和过渡时间不一致，则以过渡为标准同时结束。
            // :duration="1000" 意思是：
            // 过渡和动画都以duration规定的时间（毫秒）为标准同时结束。
            template:`
            <transition type="transition" :duration="{enter:1000,leave:3000}">
            <div v-if="show">hello-word</div>
            </transition>
            <button @click="handleClick">切换</button>`
        });
        app.mount("#root");
    </script>

引入第三方动画库配合transition标签来实现动画效果：

    <!-- 引入第三方css库 -->
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

 <script>
        // 使用vue的动画封装:transition来实现动画效果
        // 单元素/单组件的入场出场动画
        const app = Vue.createApp({
            data() {
                return {
                    show:true,
                }
            },
            methods: {
                handleClick(){
                    this.show = !this.show;
                }
            },
            // 使用<transition>标签将要做动画的元素包裹
            // <transition appear>表示第一次进入也有特效
            //  修改类名和自定义类名： 
            // 1.<transition name="x">,则相应的样式的类名要从v-开头改为x-开头；
            // 2.<transition enter-active-class="ea">,则样式中的.v-enter-active就要写成.ea
            //  自定义类名的好处：方便引用第三方动画 
            template:`
            <transition enter-active-class="animate__animated animate__bounce"
            leave-active-class="animate__animated animate__flash">
            <div v-if="show">hello-word</div>
            </transition>
            <button @click="handleClick">切换</button>`
        });
        app.mount("#root");
    </script>

3.在Vue中使用JS做动画：

<script>
        const app = Vue.createApp({
            data() {
                return {
                    show:true,
                }
            },
            methods: {
                handleClick(){
                    this.show = !this.show;
                },
                handleBeforeEnter(el){
                    el.style.color = "green";
                },
                // el是Dom元素，done是告知vue动画已完成的函数。
                handleEnter(el,done){
                    const itv = setInterval(() => {
                        if(el.style.color == "green"){
                            el.style.color = "red";
                        }else{
                            el.style.color = "green";
                        }
                    }, 1000);
                    setTimeout(() => {
                        clearInterval(itv);
                        done();
                    }, 5000);
                },
                // handleAfterEnter是钩子@after-enter的时间处理函数，
                // 只有done被调用以后才会自动执行
                handleAfterEnter(){
                    alert("123");
                }
            },
            // :css="false"是禁用css做动画过渡效果
            // 使用Js做动画：调用js的钩子（与生命周期函数相似，都会在某一时刻自动执行）
            // 有哪些钩子？：@before-enter、@enter、 @after-enter
            // 有哪些钩子？：@before-leave、@leave、 @after-leave
            template:`
            <transition :css="false"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter">
            <div v-if="show">hello-word</div>
            </transition>
            <button @click="handleClick">切换</button>`
        });
        app.mount("#root");
    </script>

多个单元素标签之间切换、多个单组件之间切换：

 <style>
        @keyframes sharkIn{
            from{
                transform: translateX(-30px);
            }
            to{
                transform: translateX(0);
            }
        }
        @keyframes sharkOut{
            from{
                transform: translateX(0);
            }
            to{
                transform: translateX(-30px);
            }
        }
        /* 配合transition标签写一些样式 */
        .v-enter-from,.v-leave-to{
            opacity: 0;
            color: green;
        }
        /*  .v-enter-active是在整个进入动画过程的效果的样式*/
        .v-enter-active{
            transition: all 2s;
            animation: sharkIn 10s;
        }
        .v-leave-active{
            transition: all 2s;
            animation: sharkOut 2s;
        }
        .v-enter-to, .v-leave-from{
            opacity: 1;
            color: red;
        }
    </style>
<script>
        // 多个单元素标签之间切换
        // 多个单组件之间切换
        const componentA = {
            template:`<div>componentA</div>`
        };
        const componentB = {
            template:`<div>componentB</div>`
        };
        const app = Vue.createApp({
            components:{
                componentA,
                componentB
            },
            data() {
                return {
                    show:true,
                    component: "component-a"
                    }
                },
            methods: {
                // handleClick(){
                //     this.show = !this.show;
                // }
                handleClick(){
                    this.component = this.component==="component-a"?
                    "component-b":"component-a"
                }
            },
            // appear表示第一次出现也有进入特效
            // mode="out-in"表示先出再入，"in-out"先入再出，不写默认同时出入
            // template:`
            // <transition appear mode="out-in">
            //     <div v-if="show">hello</div>    
            //     <div v-else="show">word</div> 
            // </transition>
            // 结合component切换组件，实现特效
            template:`
            <div>
                <transition appear mode="out-in">
                <component :is="component"/>   
                </transition>
            <button @click="handleClick">切换</button>
            </div>`
            
        });
        app.mount("#root")
    </script>

列表动画：

 <style>
    /* v-move让其他元素在移动过程中也有动画过渡效果 */
        .v-move{
            transition: all 1s;
        }
    </style>

    <!-- 引入第三方css库 -->
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

<script>
        // 列表动画
        const app = Vue.createApp({
            data() {
                return {
                    list:[1,2,3]
                }
            },
            methods: {
                add(){
                    this.list.unshift(this.list.length+1)
                },
                decent(){
                    this.list.pop(0)
                }
            },
            template:`
            <div>
                <transition-group appear
                 enter-active-class="animate__animated animate__bounce"
                 leave-active-class="animate__animated animate__flash">
               <span class="list" v-for="item in list" :key="item">{{item}}</span>     
                </transition-group>
                <button @click="add">增加</button>    
                <button @click="decent">减少</button>    
            </div>`
        });
        app.mount("#root");
    </script>

状态动画是通过控制数据的变化产生一种视觉上的动画效果。