VUE框架:vue2转vue3全面细节总结(5)过渡动效

大家好,我是csdn的博主:lqj_本人

这是我的个人博客主页:

lqj_本人_python人工智能视觉(opencv)从入门到实战,前端,微信小程序-CSDN博客

最新的uniapp毕业设计专栏也放在下方了:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西,

哔哩哔哩欢迎关注:

卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频

过渡动效

基本用法

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

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

单个路由的过渡

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

javascript 复制代码
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>

复用的组件之前进行过渡

javascript 复制代码
const routes = [
  {
    path: '/user/:id',
    component: User,
    meta: { transition: 'animate__bounceIn' },
  },
]

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

javascript 复制代码
<router-view v-slot="{ Component, route }">
  <transition :enter-active-class="`animate__animated ${$route.meta.transition}`">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>
相关推荐
遂心_2 分钟前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
溯水流光3 分钟前
React 源码解析
前端
Aomnitrix5 分钟前
知识管理新范式——cpolar+Wiki.js打造企业级分布式知识库
开发语言·javascript·分布式
光影少年6 分钟前
Typescript工具类型
前端·typescript·掘金·金石计划
北风GI10 分钟前
如何在 vue3+vite 中使用 Element-plus 实现 自定义主题 多主题切换
前端
月亮慢慢圆11 分钟前
网络监控状态
前端
_AaronWong16 分钟前
实现 Electron 资源下载与更新:实时进度监控
前端·electron
Doris_202317 分钟前
Python条件判断语句 if、elif 、else
前端·后端·python
Doris_202322 分钟前
Python 模式匹配match case
前端·后端·python
森林的尽头是阳光35 分钟前
vue防抖节流,全局定义,使用
前端·javascript·vue.js