请教一个vue transition 动画的问题

Question

请教一个vue transition 动画的问题，我给页面一个元素加了transition过渡效果，进入当前页面能触发效果，离开就不行，想问一下这是为什么，还是我哪里写的不对

 <transition
      name="fade"
      :appear="true"
    >
      <div class="e letter cursor-pointer" @click="toExplore">E</div>
</transition>


// animation
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-leave,
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active {
  transition: all 1.2s ease-out;
}

.fade-leave-active{
    transition: all 1.2s ease-in;
}

Answer 1

Vue的<transition>元素只会在它的子元素被插入、更新或移除时触发动画。所以，离开动画需要在元素被移除时触发。