路由过渡效果

歌手列表切换到歌手详情页

  • 在base.scss定义全局样式
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s
}

.slide-enter-from, .slide-leave-to {
  transform: translate3d(100%, 0, 0)
}
  • 在router-view定义
<router-view v-slot="{ Component }">
      <transition appear name="slide">
        <component :is="Component" :data="selectedSinger"/>
      </transition>
</router-view>
posted @ 2022-11-06 11:20  pocoui  阅读(26)  评论(0)    收藏  举报