css - vue transition-group - 如何防止两个元素在 mode=out-in 中保留空间

Question

如何在离开元素离开之前停止显示进入元素？ (我下面的尝试的问题是容器必须变高，同时允许两个元素。但是选择了 out-in 以避免这种碰撞)

        <div class="transition-wrapper">
            <transition-group mode="out-in" name="left-right-slide">
                <div class="panel-slot" key="left" v-if="slot === 'left'">
                    <slot :name="slot"></slot>
                </div>
                <div class="panel-slot" key="right" v-else>
                    <slot :name="slot"></slot>
                </div>
            </transition-group>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .left-right-slide-enter-active {
        transition: all .3s ease;
        transition-delay: .4s;
    }
    .left-right-slide-leave-active {
        transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .left-right-slide-enter, .left-right-slide-leave-to {
        transform: translateX(100vw);
    }

Answer 1

你应该使用 <transition>而不是 <transition-group> . <transition-group>不支持 mode Prop 。