vue transition-group - 如何防止两个元素在 mode=out-in 中保留 space
vue transition-group - how to prevent both elements from reserving space in mode=out-in
如何在离开元素离开之前停止显示进入元素? (我下面尝试的问题是容器必须长得更高,同时允许两个元素。但是选择了 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);
}
您应该使用 <transition>
而不是 <transition-group>
。 <transition-group>
不支持 mode
属性。
如何在离开元素离开之前停止显示进入元素? (我下面尝试的问题是容器必须长得更高,同时允许两个元素。但是选择了 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);
}
您应该使用 <transition>
而不是 <transition-group>
。 <transition-group>
不支持 mode
属性。