VUE过渡组 - 如何防止两个元素在模式中保留空间= out-in

Question

如何阻止输入元素显示直到离开元素后？（我下面尝试的问题是，容器必须更高，同时允许两个要素。

        <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。