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 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
javascript编程起步(第四课)
Feb 27 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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错误提示的关闭方法详解
2013/06/23 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
详解Python 解压缩文件
2019/04/09 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
J2EE面试题
2016/03/14 面试题
2014自主招生自荐信策略
2014/01/27 职场文书
学校交通安全责任书
2014/08/25 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2015年母亲节活动总结
2015/02/10 职场文书