Vue过渡:边栏过渡入但不出

Question

我有一个边栏组件，每当隐藏和显示边栏时，它都会利用一个转换元素来滑动边栏。当它被关闭时，它可以很好地滑出，但每当它被打开时，它就会弹出。

边栏.vue

<template>
<aside v-if="mountSidebar" class="min-h-screen">
<transition name="slide" appear @after-leave="close()">
<div v-show="closeSidebar" class="min-h-screen" :class="`bg-${bgColor}`">
<slot></slot>
</div>
</transition>
</aside>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "vue";
export default defineComponent({
name: "Sidebar",
props: {
bgColor: {
type: String,
default: "blue",
},
textColor: {
type: String,
default: "white",
},
modelValue: {
type: Boolean,
default: true,
},
},
emits: ["update:modelValue"],
setup(props, { emit }) {
const mountSidebar = ref(props.modelValue);
const closeSidebar = ref(props.modelValue);
const close = () => {
emit("update:modelValue", false);
mountSidebar.value = props.modelValue;
};
watch(
() => props.modelValue,
(value) => {
if (value) mountSidebar.value = true;
closeSidebar.value = value;
}
);
return {
close,
mountSidebar,
closeSidebar,
};
},
});
</script>
<style>
.slide-enter-active,
.slide-leave-active {
transition: transform 0.2s ease;
}
.slide-enter,
.slide-leave-to {
transform: translateX(-100%);
transition: all 150ms ease-in 0s;
}
</style>

然后，我的App.vue只有一个按钮，可以切换侧边栏上设置为modelValue道具的值，即<sidebar showSidebar ...>content</sidebar>

Answer 1

所以我一直都很笨，在使用Vue 3时阅读Vue 2的文档。修复它所需要的只是将.slide-enter更改为.slide-enter-from。