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>
相关推荐
DanB241 分钟前
html复习
javascript·microsoft·html
汉得数字平台6 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹13 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法