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开发时的五个注意事项
Dec 08 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
vue中如何使用ztree
2018/02/06 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
django序列化serializers过程解析
2019/12/14 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
python中random模块详解
2021/03/01 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
保送生自荐信范文
2013/10/06 职场文书
学生个人自我鉴定
2014/03/26 职场文书
小学领导班子对照材料
2014/08/23 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
维稳工作承诺书
2015/01/20 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS