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 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
简单的JS轮播图代码
Jul 18 Javascript
需要牢记的JavaScript基础知识
Sep 25 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
python os用法总结
2018/06/08 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
巴西女装购物网站:Eclectic
2018/04/24 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
本科生详细的自我评价
2013/09/19 职场文书
活动邀请函范文
2014/01/19 职场文书
优秀经理获奖感言
2014/03/04 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
A22国内电台短波广播频率表
2022/05/10 无线电