VUE框架：vue2转vue3全面细节总结（5）过渡动效

淼学派对

发布于 2023-10-14 11:17:09

2170

发布于 2023-10-14 11:17:09

文章被收录于专栏：云开发小程序1

过渡动效

基本用法

如果想要在路由组件上使用转场，对导航进行动画处理，我可以使用 v-slot 结合 Animete.css 来实现：

<RouterView v-slot="{ Component }">
  <transition enter-active-class="animate__animated animate__fadeIn">
    <component :is="Component" />
  </transition>
</RouterView>

单个路由的过渡

上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，可以将 元信息 和动态的 enter-active-class 结合在一起，放在<transition> 上：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { transition: 'animate__fadeIn' },
  },
  {
    path: '/user',
    component: User,
    meta: { transition: 'animate__bounceIn' },
  },
]

<RouterView v-slot="{ Component }">
  <transition :enter-active-class="`animate__animated ${$route.meta.transition}`">
    <component :is="Component" />
  </transition>
</RouterView>

复用的组件之前进行过渡

const routes = [
  {
    path: '/user/:id',
    component: User,
    meta: { transition: 'animate__bounceIn' },
  },
]

定义以上路由，当从 /user/123 切换到 /user/456 时是没有任何过渡效果的。这时候我们可以添加一个 key 属性来强制进行过渡，key 值只要不同就行了。说白了就是让 Dom 不要被复用，和 v-for 的 key 属性原理刚好相反。

<router-view v-slot="{ Component, route }">
  <transition :enter-active-class="`animate__animated ${$route.meta.transition}`">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-10-11，如有侵权请联系 cloudcommunity@tencent.com 删除

transition