Vue3中实现路由跳转的过渡动画(一)

简介: Vue3中实现路由跳转的过渡动画(一)

由于VueRouter官方文档写的太过抽象,真的特别不好理解,所以我来总结一下如何去更简单地理解路由跳转时的动画。

首先看一下官方对于这个概念的解释。

image.png

在刚开始学习的时候,看到黄色框框里内容直接傻眼,从未见过:is这个指令。不知道这个地方到底是固定写法还是让我们写自己的组件?

一.:is指令是什么意思?


1.在这里准备两个文件来演示这个指令的作用。

image.png

2.button.vue结构也很简单

就是一个按钮组件

image.png

text.vue里并没有自己的组件,而是使用了component这个标签来显示出MyButton这个组件。

image.png

3.props也是可以正常传递的

image.png

4.这样text.vue这个组件自身就相当于MyButton这个组件,你可能会好奇,这有什么用呢?

5.如果我们像下面这样写,我再引入一个组件,然后定义一个变量isChange,于是我们就可以动态的控制这个组件到底展示哪一个组件了。

image.png

让我们看看页面

image.png

点击按钮切换

image.png

6.写到这里,突然感觉怎么像路由呢?路由不就是来完成这事的吗?那我既然可以这样完成伪路由的功能,那我大费周折用VueRouter干啥啊?

如果你能想到这里,不得不承认,你很棒!但是你有没有想过一个问题,你的url地址永远不会变,history对象你也没办法调用,你无法完成页面回退,前进的功能。

image.png

二.搭配v-slot完成组件跳转动画的准备工作


image.png

1.要看明白这里,你必须知道v-slot的概念,这个我之前的文章里有写,这里不过多赘述

2.下一步你需要理解的就是,我们的页面其实是一个单组件页面,也就是所有你看到的页面,都是一个.vue文件。

3.你组件的切换其实都是在<router-view>这个组件内展示的,每个组件都是独立的。

4.所以这里的<component :is="xxx" >就和我们最开始写的text.vue组件是一模一样的原理。

tips:希望你可以细细品味我上面写的四条内容

三.准备三个伪页面


1.这里我想用实际的页面来展示路由跳转的动画,但是我们今天的主题并不是页面效果,所以这里我选择了截图三个微信页面,来完成今天要讲的核心内容。

image.png

2.文件名字我翻译一下发现,个人主页,index 朋友圈,就是我们常用的这三个页面。

image.png

3.结构也是很简单的三个文件,然后把组件全部放进router组件里(这里我们用的是vue-router4

image.png

image.png

4.三个组件结构如下,大概意思就是点击图片路由跳转到其他页面,我这里直接将图片作为跳转的<link>标签了,为了方便就不设计按钮了。

image.png

四.开始设计动画效果


1.结合上面的知识,我们的App.vue主页设计为了如下


image.png

2.这里我们先讨论假设所有组件都应用统一的过度动画。


3.要想有动画效果,你首先需要确定


这个组件最开始的状态是如何?最终的状态如何

这句话怎么理解呢?学到这里,我相信你对组件的生命周期已经有了很好的认识,其实这两个状态就好似对应组件的onBeforeMountonMounted这两个时机。

4.直接实战讲解吧:vue里提供了这几个阶段的类名,需要搭配css使用。我们一个一个讲。


1.首先是v-enter-from(前面的v可以自定义名称,这里我写的是自己的名字,后面需要用到这个)

image.png

这个具体到页面是什么意思呢?其实非常简单,就好比下图,组件挂载前的位置,处于App组件的X轴的负自身宽度的100%

image.png

  1. 挂载前的位置我们设置好了,那么接下来就是这个组件挂载后的位置在哪里呈现呢?

需要这个v-enter-to

image.png

呈现到页面如下效果

image.png

  1. 继续思考,组件挂载前后的位置我们确定了,那么它中间的过程,希望它是多少秒完成?什么样的方式完成?好像我们还没确认。这里需要这个v-enter-active类名

image.png

具体到页面上的效果就是,我从X轴的-100%自身宽度,到呈现到页面上花费了2sease单词是柔和的意思,在这里我们不过多赘述CSS3的知识,自己可以去MDN上复习。

  1. 万事俱备,只欠东风。这里只需要在App组件的router-view标签内包裹一层transition标签即可。

image.png

name属性的值就是我们在下面预留的fang-enter-fromfangmode='out-in'其实是outin两个单词的组合,这里代表着过渡的模式,mode="out-in"的意思是,组件先淡出,才允许下一个组件进入,这个先后顺序非常重要!!!如果设置mode="in-out"代表着下一个组件先进入页面,然后当前的组件才退出去,这样会造成页面同时存在两个组件的效果,并不是我们想要的。

image.png

image.png

这次讲的跳转效果是所有页面的通用过度,下次会讲解如何给两个组件设置单独的挑战效果。

如:在发现进入朋友圈页面上从右边划过,而从朋友圈返回时,发现是从左边滑动的效果

相关文章
|
6天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
103 10
|
4月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
733 5
|
1月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
245 1
|
1月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
144 0
|
2月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
95 0
|
4月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
409 17
|
5月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
|
5月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
412 6
|
4月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1500 0
|
6月前
|
JavaScript 前端开发 UED
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
435 2