路由-为路由切换启动动画|学习笔记

简介: 快速学习路由-为路由切换启动动画

开发者学堂课程【Vue.js 入门与实战路由-为路由切换启动动画】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8196


路由-为路由切换启动动画

上节已经学习过了点击路由实现切换,本节主要为这个切换过程,添加一个动画效果:

//创建vue实例,得到ViewMode1
var Vm = new Vue({
el: ‘#app'
data: {} ,
methods: {}
router:routerobj//将路由规则对像,注册到vm实例上用来监听url 地址的变化,然后展示对应的组件
}) ;
</ script>

给图片加动画:

代码:

第一步:

<transition>
<router-view></router-view>
</ transition>

第二

.v-enter ,
.v-leave-to{opacity: 0;
transform: translatex(140px);
.v-enter-active,
.v-leave-active {
transition: al1 0.5s ease;}

输出的结果:

image.png

已经有了过渡效果,但不是很美观,所以再给其添加一个过渡模式:

<transition mode=“out-in”>
<router-view></router-view>
</ transition>

这就是路由通过动画控制,这样会让用户感觉操作起来比较流畅。

相关文章
Flutter Getx 路由 until 方法帮助你跳转指定路由
不少同学都会问我,这样一个场景,当我点击商品列表,进入商品页,点击购买,支付成功后,想返回商品页,或者我的中心的订单列表。怎么做,这中间跨度了 n 个路由。 我不只一次的推荐 GetX 的 until 方法,和 offNamedUntil 方法。 我写了个 demo 今天我们就一起来看下这两个方法如何使用。
1588 0
Flutter Getx 路由 until 方法帮助你跳转指定路由
|
JavaScript
|
1月前
|
移动开发 前端开发 JavaScript
vue-router学习一:什么是路由,路由分类,路由安装,路由使用,路由默认路径,history模式,默认的linkActiveClass属性,路由代码跳转
这篇文章是关于Vue.js官方路由管理器vue-router的详细介绍,包括路由的基本概念、分类、安装、使用以及在单页面应用中的路由模式和跳转方法。
107 0
vue-router学习一:什么是路由,路由分类,路由安装,路由使用,路由默认路径,history模式,默认的linkActiveClass属性,路由代码跳转
|
1月前
|
缓存 JavaScript 前端开发
vue-router学习二:动态路由(路由传递数据的一种方式),路由懒加载,嵌套路由,路由传递参数方式,导航守卫,keep-alive标签
这篇文章主要介绍了Vue Router的高级用法,包括动态路由、路由懒加载、嵌套路由、路由参数传递、导航守卫以及keep-alive的使用。
36 0
vue-router学习二:动态路由(路由传递数据的一种方式),路由懒加载,嵌套路由,路由传递参数方式,导航守卫,keep-alive标签
|
4月前
|
JavaScript 前端开发 API
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
987 0
|
4月前
|
JavaScript
vue解决方案 | router-view路由切换时页面不刷新
vue解决方案 | router-view路由切换时页面不刷新
262 0
|
11月前
|
缓存 JavaScript
Vue 路由缓存 防止路由切换数据丢失 路由的生命周期
Vue 路由缓存 防止路由切换数据丢失 路由的生命周期
umi如何实现路由的动画跳转?
在src下新建一个layouts的文件夹,在layouts文件夹下新建两个文件
151 0
umi如何实现路由的动画跳转?
|
机器学习/深度学习 前端开发 JavaScript
路由动画详解(附加代码效果)
路由动画详解(附加代码效果)
105 0
|
网络架构 UED
Flutter(二十三)——静态路由与动态路由
Flutter(二十三)——静态路由与动态路由
527 3
Flutter(二十三)——静态路由与动态路由