使用vue中Transition组件中的坑

---

问题描述

在使用vue内部的Transition组件的时候，发现并没有效果出来

  <Transition name="fade-right" mode="out-in">
          <XtxBreadItem
            v-if="topCategory"
            :to="`/category/${topCategory.id}`"
            >{{ topCategory.name }}</XtxBreadItem
          >
        </Transition>

.fade-right-entry-from {
  opacity: 0;
  transform: translateX(20px);
}
.fade-right-entry-active {
  transition: all 0.5s;
}
.fade-right-entry-to {
  opacity: 1;
  transform: none;
}
.fade-right-leave-from {
  opacity: 1;
  transform: none;
}
.fade-right-leave-active {
  transition: all 0.5s;
}
.fade-right-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

---

原因分析：

因为组件没有移除和重新创建，通过加入key就可以解决了

  <Transition name="fade-right" mode="out-in">
          <XtxBreadItem
            v-if="topCategory"
            :to="`/category/${topCategory.id}`"
            :key=" topCategory.id"
            >{{ topCategory.name }}</XtxBreadItem
          >
        </Transition>