vue router 配合transition 切换动画
把<router-view>嵌套在<transition>里,路由变化的时候,vue会为包裹页面的div增加动画样式,我们要做的就是监听路由变化、定义这些动画样式,以规定页面到底怎么切换。具体样式名通过transition的name属性绑定。下面是在移动端模拟一般app界面的前进后退动画:
<template>
<div id="app">
<transition :name="direction" >
<router-view class="appView"></router-view>
</transition>
</div>
</template> <script>
export default {
name: "App",
data: () => ({
direction: "slide-right"
}),
watch: {
$route(to, from) {
const toDepth = to.path.split("/").length;
const fromDepth = from.path.split("/").length;
if (to.path == "/") {
this.direction = "slide-right";
} else if (from.path == "/") {
this.direction = "slide-left";
}else{
this.direction = toDepth < fromDepth ? "slide-right" : "slide-left";
}
}
}
};
</script> <style>
.appView {
position: absolute;
width:100%;
transition: transform 0.3s ease-out;
}
.slide-left-enter{
transform: translate(100%, 0);
}
.slide-left-leave-active{
transform: translate(-50%, 0);
}
.slide-right-enter {
transform: translate(-50%, 0);
}
.slide-right-leave-active{
transform: translate(100%, 0);
}
</style>
具体动画方式都能在$router的watch里面去定义。
建议增加router的scrollBehavior,定义来回切换的页面位置。
吐槽下在移动端没办法配合手势滑动来实现良好的router回退。
vue router 配合transition 切换动画的更多相关文章
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- vue3.x移动端页面基于vue-router的路由切换动画
移动端页面切换一般都具有动画,我们既然要做混合开发,做完之后还是不能看起来就像一个网页,所以我们基于vue-router扩展了一个页面切换push和pop的动画.这是一篇比较硬核的帖子,作者花了不少精 ...
- Vue一个案例引发「动画」的使用总结
项目开发中动画有着很重要的作用,而且也是用到的地方非常多,例如:鼠标的进入离开,弹窗效果,组件的显示隐藏,列表的切换等等,可以说我们网页上的动画无处不在,也有人说了,这些东西也可以不使用动画. 对,你 ...
- Vue.js 相关知识(动画)
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
- css3中outline切换动画效果
今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> < ...
- Vue——关于css过渡和动画那些事
1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue学习笔记【24】——Vue组件(组件切换)
使用flag标识符结合v-if和v-else切换组件 页面结构:(缺点:只适用于两个组件间切换,不适合多个) <div id="app"> <input ...
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
随机推荐
- Maven 上传本地包到仓库 (来源于同事(gagahjt)的笔记本)
1:将本地jar包导入到自己的Maven仓库 mvn install:install-file -Dfile=D:\\kaptcha-2.3.2.jar -DgroupId=com.google -D ...
- Linux下面安装swoole
需要安装php7 新建一个文件夹,作为存储swoole的文件夹 然后执行下面相对应的命令,这里是我执行的命令 新建文件夹 mkdir swoole 切入到文件夹中,进行下载安装包 wget http: ...
- 剑指offer二十九之最小的K个数
一.题目 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 二.思路 详解代码. 三.代码 import java.util. ...
- 关于MyBatis的工作流程和与JDBC的比较与Hibernate的比较
一.传统的JDBC的方式 1.从一个jdbc程序开始 public static void main(String[] args) { Connection connection = null; Pr ...
- 【链表】Add Two Numbers
题目: You are given two linked lists representing two non-negative numbers. The digits are stored in r ...
- __name__ == "__main__"的作用是什么?
问题: __name__ == "__main__" 的作用是什么? # Threading example import time, thread def myfunction( ...
- iptables关键学习总结
iptables技术推荐参考这位仁兄的博客:http://www.zsythink.net/archives/category/%E8%BF%90%E7%BB%B4%E7%9B%B8%E5%85%B3 ...
- [C语言]类型限定词const解析
作为C90增加的一个受限类型关键字,const赋予了它修饰的变量一个新属性——不变性,如果一个变量声明中带有关键字const,则无法通过赋值.增减运算来修改该变量的值. 一.指针与const结合 co ...
- [转]微信小程序 c#后台支付结果回调
本文转自:http://www.cnblogs.com/weizhiing/p/7700723.html 又为大家带来简单的c#后台支付结果回调方法,首先还是要去微信官网下载模板(WxPayAPI), ...
- JBoss 实战(2)
转自:https://www.cnblogs.com/aiwz/p/6154591.html JBOSS HTTP的Thread Group概念 JBOSS是一个企业级的J2EE APP Contai ...