Vue2路由动画效果的实现代码


Posted in Javascript onJuly 10, 2017

这篇文章主要讲的是路由切换的时候动画效果的实现,可以根据不同的路径去改变动画的效果,以下就是源码,可供参考:

<template> 
 <div id="app"> 
 
  <transition :name="transitionName"> 
   <router-view class="child-view"></router-view> 
  </transition> 
 
 </div> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
  return { 
   transitionName: 'slide-left' 
  } 
 }, 
 mounted () { 
 }, 
 //监听路由的路径,可以通过不同的路径去选择不同的切换效果 
 watch: { 
  '$route' (to, from) { 
   if(to.path == '/'){ 
    this.transitionName = 'slide-right'; 
   }else{ 
    this.transitionName = 'slide-left'; 
   } 
  } 
 } 
} 
</script> 
 
<style> 
.child-view { 
 position: absolute; 
 left: 0; 
 top: 0; 
 width: 100%; 
 height: 100%; 
 transition: all .5s cubic-bezier(.55,0,.1,1); 
} 
.slide-left-enter, .slide-right-leave-active { 
 opacity: 0; 
 -webkit-transform: translate(30px, 0); 
 transform: translate(30px, 0); 
} 
.slide-left-leave-active, .slide-right-enter { 
 opacity: 0; 
 -webkit-transform: translate(-30px, 0); 
 transform: translate(-30px, 0); 
} 
</style>

路由的api链接在这,详细的可以去看这https://router.vuejs.org/zh-cn/advanced/transitions.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
async/await地狱该如何避免详解
May 10 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
深入浅析Node.js单线程模型
Jul 10 #Javascript
require.js中的define函数详解
Jul 10 #Javascript
vue.js组件之间传递数据的方法
Jul 10 #Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 #Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 #jQuery
Angular X中使用ngrx的方法详解(附源码)
Jul 10 #Javascript
angular实现spa单页面应用实例
Jul 10 #Javascript
You might like
动易数据转成dedecms的php程序
2007/04/07 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
Python OpenCV实现视频分帧
2019/06/01 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
英国景点门票网站:attractiontix
2019/08/27 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
技校个人求职信范文
2014/01/25 职场文书
公司开业庆典主持词
2014/03/21 职场文书
中秋晚会活动方案
2014/08/31 职场文书
单位员工收入证明样本
2014/10/09 职场文书
简爱读书笔记
2015/06/26 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
详解Java实践之适配器模式
2021/06/18 Java/Android