Vue Transitions: Sidebar transitioning in but not out

Question

I have a Sidebar component that utilizes a transition element to slide the sidebar in and out whenever it is hidden and shown. It slides out just fine when it is toggled off, but whenever it is toggled on, it just pops in.

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>

Then my App.vue just has a button that toggles a value which is set as the modelValue prop on the sidebar, i.e. <sidebar showSidebar ...>content</sidebar>

Answer 1

So turns out the whole time I was just a big dumb and was reading Vue 2's docs while using Vue 3. All it took to fix it was changing .slide-enter to .slide-enter-from.