vue transition跳转路由时，动画中swiper总是出现第一个silde

Question

<transition name="fade-transform" mode="out-in">
  <router-view />
</transition>

// scss
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
/*fade-transform*/
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 3s;
}
.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

为什么是这样呢，是swiper的样式原因，还是vue transititon或其他什么的原因？？？
有没有人遇到过，求解答