44 Vue动画 ＜transtion＞ 标签里有两个DOM，然后一个出现时，另一个消失

为了方便，我们就写一个透明度过渡就好。实现这个效果，都是我们学过的知识了，你可以跟着写，也可以先不看下面的文章，自己先写写看。练习一下。

你可以先写进入时的过渡样式。

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

有了进场的过多效果，直接加入出场的选择器就可以实现同时拥有入场和出场动画了。

    .v-enter-from,
    .v-leave-to {
        opacity: 0;
    }

    .v-enter-to,
    .v-leave-from {
        opacity: 1;
    }

    .v-enter-active,
    .v-leave-active {
        transition: opacity 2s ease-in;
    }

这时再到浏览器中查看效果，虽然都有了动画。但这时候的动画时同时发生的，并不是我们想要的效果。

为了解决这个问题，可以在模板中 标签上加入 mode 属性。mode 属性专门用来控制是先显示离场和入场动画的顺序的。

比如现在想让离场动画先显示，然后再显示入场动画。就可以使用 mode="out-in"。

template: `  
    
        小红进入了试衣间
        小丽进入了试衣间
    
    切换动画
`

当然你也可以用 mode="in-out" 先显示入场动画，再显示出场动画。只不过这并不是我们想要的方式。

但这时候还是有一个小问题的，就是刚进入页面时，显示的DOM元素（小丽进入了试衣间）是没有动画效果的。如果想让进入页面，开始就产生动画效果，可以在 标签上加上 appear 属性就可以实现。

appear 属性的意思是初次对某一个元素进行默认显示的时候也进行动画显示。

template: `  
    
        小红进入了试衣间
        小丽进入了试衣间
    
    切换动画
`

这时候在浏览器中预览，刚进入页面时也带有了动画效果。

    
    
    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 2s ease-in;
        }
    
    



    


    const app = Vue.createApp({
        data(){
            return {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow = ! this.isShow
            }
        },
        template: `  
            
                
小红进入了试衣间
                
小丽进入了试衣间
            
            切换动画
        `
    })
    const vm = app.mount("#app")