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 全角转半角部分
Oct 28 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
js实现常用排序算法
Aug 09 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
vue中axios的二次封装实例讲解
Oct 14 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
使用apache模块rewrite_module (转)
2007/02/14 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python复制文件操作实例详解
2015/11/10 Python
Python过滤列表用法实例分析
2016/04/29 Python
python妙用之编码的转换详解
2017/04/21 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
求职信的要素有哪些呢
2013/12/26 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
期末自我鉴定
2014/02/02 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
学位证书委托书
2014/09/30 职场文书
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript