Vue Router过渡动效
<router-view>
是基本的动态组件,所以我们可以用 <transition>
组件给它添加一些过渡效果:
<transition>
<router-view></router-view>
</transition>
上面的用法会给所有路由设置一样的过渡效果,如果你想让每个路由组件有各自的过渡效果,可以在各路由组件内使用 <transition>
并设置不同的 name。
const Foo = {
template: `
<transition name="slide">
<div class="foo">...</div>
</transition>
`
} const Bar = {
template: `
<transition name="fade">
<div class="bar">...</div>
</transition>
`
}
还可以基于当前路由与目标路由的变化关系,动态设置过渡效果:
<!-- 使用动态的 transition name -->
<transition :name="transitionName">
<router-view></router-view>
</transition>
// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
详细参看Vue Router https://router.vuejs.org/zh/
Vue Router过渡动效的更多相关文章
- vue 路由过渡动效
<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition name="slid ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- 百度MUX:APP动效之美需内外兼修
移动互联网时代已经到来.APP已如天空的繁星.数也数不清.随着手机硬件的不断升级,实现炫酷且流畅的动效不再是遥远的梦想.假设你是APP达人,喜欢试用各种APP,你肯定会发现越来越多的APP開始动效化. ...
- Vue版本过渡变化
到了2.0以后,有哪些变化: 在每个组件模板,不在支持片段代码 之前: <template id="aaa"> <h3>我是组件</h3>< ...
- css3常用动效以及总结
(迁移自旧博客2017 08 06) CSS3 文本效果: box-shadow:盒子阴影,可以给卡片添加提高美化效果.可广泛应用于内容展示页面. <div class="card&q ...
- Google I/O 官方应用中的动效设计
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jILRvRTrc/article/details/82881743 作者:Nick Butcher, ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- angular2中的路由转场动效
1.为什么有的人路由转动效离场动效不生效? 自己研究发现是加动效的位置放错了 如下: <---! animate-state.component.html --> <div sty ...
随机推荐
- android 如何从activity跳转到另一个activity下指定的fragment
思路: 跳转到目标fragment所在的activity,并传递一个flag,来确定要到哪个fragment,根据该flag判断后,跳转到指定的fragment即可. 代码: 当前界面: intent ...
- spring+orm框架的兼容问题
Springframework和Hibernate版本对应关系 org.springframework 3.0.x对应org.hibernate4.0.x版本 org.springframework ...
- sqlite3 新建数据库的过程
有些东西,很简单,不过有坑,就变复杂了.我先说最简单的方法,新建一个空的txt文档,然后把后缀改为db就可以了.-_-蛋疼,其实一开始我是不知道的,也是后来成功新建db后发现db为0kb才大胆地做了这 ...
- URAL 1297 求最长回文字符串
有种简单的方法,数组从左到右扫一遍,每次以当前的点为中心,只要左右相等就往左右走,这算出来的回文字符串是奇数长度的 还有偶数长度的回文字符串就是以当前扫到的点和它左边的点作为中心,然后往左右扫 这是O ...
- [thrift] thrift基本原理及使用
参考文章RPC 基本原理与 Apach Thrift 初体验 RPC基本原理 RPC(Remote Procedure Call),远程过程调用,大部分的RPC框架都遵循如下三个开发步骤: 1. 定义 ...
- Pull方式解析XML文件
package com.pingyijinren.test; import android.content.Intent; import android.os.Handler; import andr ...
- HDU——1179 Ollivanders: Makers of Fine Wands since 382 BC.
Ollivanders: Makers of Fine Wands since 382 BC. Time Limit: 2000/1000 MS (Java/Others) Memory Lim ...
- 洛谷 P1183 多边形的面积
P1183 多边形的面积 题目描述 给出一个简单多边形(没有缺口),它的边要么是垂直的,要么是水平的.要求计算多边形的面积. 多边形被放置在一个 X-YX−Y 的卡笛尔平面上,它所有的边都平行于两条坐 ...
- Linux MariaDB 遗忘密码后重置密码
Linux MariaDB 遗忘密码后重置密码 MariaDB 是 MySQL 的一个分支数据库.处理的办法和 MySQL 相同. 修改 MySQL 配置文件 在 [mysqld] 追加配置项: [r ...
- 基于Token的身份验证——JWT(转)
本文转自:http://www.cnblogs.com/zjutzz/p/5790180.html 感谢作者 初次了解JWT,很基础,高手勿喷.基于Token的身份验证用来替代传统的cookie+se ...