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 相关文章推荐
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 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读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
深入探究node之Transform
2017/07/20 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
python实现telnet客户端的方法
2015/04/15 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Python类的继承和多态代码详解
2017/12/27 Python
Mac安装python3的方法步骤
2019/08/09 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
幼儿园课题实施方案
2014/05/14 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
各种货币符号快捷输入
2022/02/17 杂记
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android