VUE的transition组件没有进入动画

在开发中遇到transition组件没有进入动画，元素直接显示出来了。如下图

原本想要的效果是红色块从左边离开，蓝色块从右边进入的，但是蓝色块没有进入效果。如下图

代码如下

<template>
  <div>
    <A v-if="show" />
    <B v-else />
    <button class="btn" @click="show = !show">按钮</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import A from "@/views/transition/components/A.vue";
import B from "@/views/transition/components/B.vue";

const show = ref(true);
</script>

<style lang="scss">
.bg {
  position: absolute;
  top: 0;
  left: 200px;
}
.red {
  background: red;
}
.blue {
  background: blue;
}
$animation-speed: 0.5s;
.slide-right-enter-active {
  position: absolute;
  transition: all $animation-speed;
}

.slide-right-leave-active {
  position: absolute;
  transition: all $animation-speed;
}

.slide-right-enter {
  position: absolute;
  transform: translate(100%, 0%) !important;
  opacity: 0;
}

.slide-right-leave-to {
  position: absolute;
  transform: translate(100%, 0%) !important;
  opacity: 0;
}

.slide-left-enter-active {
  position: absolute;
  transition: all $animation-speed;
}

.slide-left-leave-active {
  position: absolute;
  transition: all $animation-speed;
}

.slide-left-enter {
  position: absolute;
  transform: translate(-100%, 0%) !important;
  opacity: 0;
}

.slide-left-leave-to {
  position: absolute;
  transform: translate(-100%, 0%) !important;
  opacity: 0;
}
</style>

<template>
  <transition name="slide-left">
    <div class="bg red w-200px h-200px"></div>
  </transition>
</template>
<script setup lang="ts"></script>

<style scoped lang="scss"></style>

<template>
  <transition name="slide-right">
    <div class="bg blue w-200px h-200px"></div>
  </transition>
</template>
<script setup lang="ts"></script>

<style scoped lang="scss"></style>

解决方法

在transition组件上加上appear属性。

官网对appear的说明：可以通过 appear attribute 设置节点在初始渲染的过渡。

我是满头的问号，没看明白。经过试验后，我的理解是添加appear属性后，动画会在组件挂载后执行。

原因

transition是在子组件上的，而v-if判断是在父组件的。子组件创建和挂载的时候transition里面的标签并没有从隐藏到显示，所以不会触发transition的进入动画。