vue+vue-router转场动画的实例代码


Posted in Javascript onSeptember 01, 2018

Vue+WebPack+HBuilder 项目记录

项目搭建完毕了,但是由于是单页应用嵌入HBuilder的时候无法利用它的转场动画,于是找到了vue的转场动画写法,使体验与APP靠近,在此记录;

1.首先我们要监听路由然后判断其是前进还是后退,来实现不同的动画

export default {
 name: 'app',
 data () {
  return {
  transitionName: 'slide-left'
  }
 },
 watch: {
 '$route' (to, from) {
  const toDepth = to.path.split('/').length
  const fromDepth = from.path.split('/').length
  this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
 }
 }
}

2.template

<transition :name="transitionName">
 <router-view class="child-view"></router-view>
</transition>

3.css;修改css得到不同的效果。

.child-view {
 position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -moz-box-sizing: border-box;
    box-sizing: border-box;
 transition: all .6s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
 opacity: 0;
 -webkit-transform: translate(-80px, 0);
 transform: translate(-80px, 0);
}
.slide-left-leave-active, .slide-right-enter {
 opacity: 0;
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
}

上面动画可作为不同级页面的转场动画,下面可作为同级页面转场动画,无需监听路由

1.template

<transition name="slide-fade">
 <router-view></router-view>
</transition>

2.css

.slide-fade-enter-active {
 transition: all .3s ease;
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 -ms-transition: all .3s ease;
 -o-transition: all .3s ease;
}
.slide-fade-leave-active {
 transition: all .5s ease;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -ms-transition: all .5s ease;
 -o-transition: all .5s ease;
}
.slide-fade-enter{
 transform: translateX(20px);
 -webkit-transform: translateX(20px);
 -moz-transform: translateX(20px);
 -ms-transform: translateX(20px);
 -o-transform: translateX(20px);
 opacity: 0;
}
.slide-fade-leave-active {
 opacity: 0;
}

以上这篇vue+vue-router转场动画的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 #Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 #Javascript
jQuery实现表格隔行换色
Sep 01 #jQuery
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 #Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 #Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 #Javascript
vue router 跳转后回到顶部的实例
Aug 31 #Javascript
You might like
初级的用php写的采集程序
2007/03/16 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python使用turtle绘制分形树
2018/06/22 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
管理部部长岗位职责
2013/12/05 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
五一晚会主持词
2015/07/01 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python