Vue Transitions：边栏过渡进入但不过渡

Question

我有一个侧边栏组件，它利用过渡元素在侧边栏隐藏和显示时将其滑入和滑出。当它关闭时它滑出很好，但是当它打开时，它就会弹出。

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

Vue Transitions：边栏过渡进入但不过渡

Vue Transitions: Sidebar transitioning in but not out

vue.js

css-transitions

vuejs3

vue-transitions