40 Vue3制作动画过渡效果

阐述

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

准备基础文件

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

    
    
    demo
    
        .v-enter-active{
            animation: comein 1s;
        }
    
        .v-leave-active{
            animation : comeout 1s;
        }
    
    



    


    const app = Vue.createApp({
        data(){
            return {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow= !this.isShow
            }
        },
        template: `
            
                
demo示例
            
            
切换动画
        `
    })
    const vm = app.mount("#app")

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

增加过渡效果

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

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

    .v-enter-from{
        opacity: 0;
    }
    .v-enter-to{
        opacity: 1;
    }
    .v-enter-active{
        transition: opacity 3s ease-out;
    }

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

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

    .v-leave-active{
        transition: opacity 3s ease-out;
    }
    .v-leave-from{
        opacity: 1;
    }
    .v-leave-to{
        opacity: 0;
    }

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

目前这段CSS代码还是比较冗余的，我们可以简化一下。简化的原则就是把一样的值的选择器合并到一期，就得到了下面这样的代码。

    
    
    demo
    
        .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;
        }
    
    



    


    const app = Vue.createApp({
        data(){
            return {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow= !this.isShow
            }
        },
        template: `
            
                
demo示例
            
            
切换动画
        `
    })
    const vm = app.mount("#app")

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

总结

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