多元素过渡

多元素过渡的注意点—必看

多元素过渡并不是transition中多个元素同时拥有一个过渡效果，transition的过渡效果只能用于单个元素
多元素过渡是多元素切换时的过渡效果
注意：多元素过渡会触发vue的就地更新策略，这样过渡的话只会跟新元素的内容，元素是不会变的故需要key

过渡模式

为啦不让多个元素切换时的过渡效果不显得生硬。vue提供啦过渡模式

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。
  
• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

效果图
没有过渡模式的效果图

有过渡模式的效果图 此时使用的过渡模式为in-out![多元素过度-过渡模式.gif](https://cdn.nlark.com/yuque/0/2021/gif/1376603/1616206427539-44a16092-f78a-4a8e-a430-a5159a425119.gif#align=left&display=inline&height=332&margin=%5Bobject%20Object%5D&name=%E5%A4%9A%E5%85%83%E7%B4%A0%E8%BF%87%E5%BA%A6-%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F.gif&originHeight=332&originWidth=998&size=304481&status=done&style=stroke&width=998)
源码

<template>
    <div class="warp">
        <button @click="show = !show">click</button>
        <!-- 过渡模式 -->
        <!-- in-out -->
        <!-- out-in -->
        <transition mode=" in-out ">
            <!-- 防止就地更新，需要使用key -->
            <div class="box" v-if="show" key="box1">box1</div>
            <div class="box box2" v-else key="box2">box2</div>
        </transition>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:true,
        }
    }
}
</script>
<style scoped>
    .box{
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, .5);
        margin: 10px auto 0;
    }
    .box2{
        background: rgba(255, 0, 0, .5);
    }
    .v-enter,
    .v-leave-to{
        transform: translate(-31px);
        opacity: 0;
    }
    .v-enter-active,
    .v-leave-active{
        transition: all 2s;
    }
    .v-enter-to,
    .v-leave{
        opacity: 1;
        transform: translate(0);
    }
</style>

单元素通过改变key值实现多元素过渡

效果图

<template>
    <div class="warp">
        <button @click="handleClick">click</button>
        <!-- 过渡模式 -->
        <transition mode="out-in">
            <!-- 防止就地更新，需要使用key -->
            <!-- <div class="box" v-if="show" key="box1">box1</div>
            <div class="box box2" v-else key="box2">box2</div> -->
            <!-- 使用一个元素通过key的切换实现元素的切换 -->
            <div class="box" :class="{box2:keyName==='box2'}" :key="keyName">{{ keyName }}</div>
        </transition>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:true,
            keyName:"box1"
        }
    },
    methods:{
        handleClick(){
            const isWord = this.keyName === 'box1'
            this.keyName = isWord ? 'box2' : 'box1'
        }
    }
}
</script>
<style scoped>
    .box{
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, .5);
        margin: 10px auto 0;
    }
    .box2{
        background: rgba(255, 0, 0, .5);
    }
    .v-enter,
    .v-leave-to{
        transform: translate(31px);
        opacity: 0;
    }
    .v-enter-active,
    .v-leave-active{
        transition: all .3s;
    }
    .v-enter-to,
    .v-leave{
        opacity: 1;
        transform: translate(0);
    }
    .v-leave-to{
        transform: translate(-31px);
    }
</style>

单组件的模式实现多元素过渡

效果图

<template>
    <div class="warp">
        <button @click="handleClick">click</button>
        <!-- 过渡模式 -->
        <transition mode="out-in">
            <!-- 防止就地更新，需要使用key -->
            <!-- 使用一个动态组件通过key的切换实现组件啊的切换 -->
            <component :is="baseDemo" :class="{box2:baseDemo==='base-demo2'}" :key="baseDemo"></component>
        </transition>
    </div>
</template>
<script>
import baseDemo1 from './baseDemo-5-1'
import baseDemo2 from './baseDemo-5-2'
export default {
    data(){
        return{
            show:true,
            keyName:"box1",
            baseDemo:'base-demo1'
        }
    },
    components:{
        baseDemo1,
        baseDemo2
    },
    methods:{
        handleClick(){
            const isWord = this.baseDemo === 'base-demo1'
            this.baseDemo = isWord ? 'base-demo2' : 'base-demo1'
        }
    }
}
</script>
<style scoped>
    .box{
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, .5);
        margin: 10px auto 0;
    }
    .box2{
        background: rgba(255, 0, 0, .5);
    }
    .v-enter,
    .v-leave-to{
        transform: translate(31px);
        opacity: 0;
    }
    .v-enter-active,
    .v-leave-active{
        transition: all .3s;
    }
    .v-enter-to,
    .v-leave{
        opacity: 1;
        transform: translate(0);
    }
    .v-leave-to{
        transform: translate(-31px);
    }
</style>