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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
微信小程序使用request网络请求操作实例
Dec 15 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
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
打造计数器DIY三步曲(中)
2006/10/09 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
javascript实现动态标签云
2015/10/16 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
JS实现DOM删除节点操作示例
2018/04/04 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python常见数字运算操作实例小结
2019/03/22 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
如何使用python代码操作git代码
2020/02/29 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python中id函数运行方式
2020/07/03 Python
vue项目实现分页效果
2021/03/24 Vue.js
个人找工作求职简历的自我评价
2013/10/20 职场文书
项目合作意向书范本
2014/04/01 职场文书
典型事迹材料范文
2014/12/29 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS