40 Vue3制作动画过渡效果

阳光穿透心脏的1/2处 2023-10-06 20:41 16阅读 0赞

#### \[动画\] 用Vue3制作过渡效果 ####

*  阐述
 *  准备基础文件
 *  增加过渡效果
 *  总结

## 阐述 ##

有了39节内容的学习，本节我们在它的基础上用Vue的内置组件，制作过渡效果。需求很简单，还是DOM元素的显示和隐藏，但不在是滑入效果，而是慢慢改变透明度 `opacity`。

## 准备基础文件 ##

去掉关键帧 `keyframes` 样式，但保留 `v-enter-active` 和 `v-leave-active`。

<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <style>
            .v-enter-active{
          
                animation: comein 1s;
            }
        
            .v-leave-active{
          
                animation : comeout 1s;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
          
            data(){
          
                return {
          
                    isShow:false
                }
            },
            methods:{
          
                hanldClick(){
          
                    this.isShow= !this.isShow
                }
            },
            template: `
                <transition>
                    <div v-if="isShow">demo示例</div>
                </transition>
                <div><button @click="hanldClick">切换动画</button></div>
            `
        })
        const vm = app.mount("#app")
    </script>

这时候的代码是没有任何过渡效果的，但是依然可以切换显示与隐藏效果。

## 增加过渡效果 ##

上节我们说了 `v-enter-active 和 v-leave-active` 都是固定写法，但是我们需要告诉它执行的过渡效果是什么样子的，这样我们就需要再写两个固定的css样式，`v-enter-from` 和`v-enter-to`。

这两个样式就是控制进入前DOM的样式和进入完成时DOM的样子的。

这时候到浏览器中预览一下，就有了进入时的透明度过渡效果。

![在这里插入图片描述][143d6f0dccc94361b5a4b556727a3801.gif_pic_center]

但现在隐藏时是没有效果的，我们还需要制作一个隐藏效果。  
这时候也是两个固定的CSS选择器 `v-leave-from` 和 `v-leave-to`，然后再编写离开时的执行效果 `v-leave-active`。

写完这些 CSS样式，隐藏时就也有了动画效果。

![在这里插入图片描述][10c1934ae3374074aa3e79e047f4f1b2.gif_pic_center]  
目前这段CSS代码还是比较冗余的，我们可以简化一下。简化的原则就是把一样的值的选择器合并到一期，就得到了下面这样的代码。

![在这里插入图片描述][31319be3b21447b5ba5a9a48e27ac54c.gif_pic_center]

<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</title>
        <style>
            .v-enter-from , .v-leave-to{
          
                opacity: 0;
            }
            .v-enter-to , .v-leave-from{
          
                opacity: 1;
            }
            .v-enter-active , .v-leave-active{
          
                transition: opacity 3s ease-out;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
          
            data(){
          
                return {
          
                    isShow:false
                }
            },
            methods:{
          
                hanldClick(){
          
                    this.isShow= !this.isShow
                }
            },
            template: `
                <transition>
                    <div v-if="isShow">demo示例</div>
                </transition>
                <div><button @click="hanldClick">切换动画</button></div>
            `
        })
        const vm = app.mount("#app")
    </script>

最后预览一下，效果还是可以实现的。

## 总结 ##

本文我们主要学习了Vue过渡效果的制作。  
通过两节的学习你也可以大概知道Vue动画和过渡效果的套路了，就是利用固定的选择器，然后配合`<transition>`标签来现实。

[143d6f0dccc94361b5a4b556727a3801.gif_pic_center]: https://img-blog.csdnimg.cn/143d6f0dccc94361b5a4b556727a3801.gif#pic_center
[10c1934ae3374074aa3e79e047f4f1b2.gif_pic_center]: https://img-blog.csdnimg.cn/10c1934ae3374074aa3e79e047f4f1b2.gif#pic_center
[31319be3b21447b5ba5a9a48e27ac54c.gif_pic_center]: https://img-blog.csdnimg.cn/31319be3b21447b5ba5a9a48e27ac54c.gif#pic_center