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>
相关推荐
daols881 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06273 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue