vue页面切换过渡transition效果


Posted in Javascript onOctober 08, 2018

首先得有你想要的过渡效果css代码:

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
 will-change: transform;
 transition: all 500ms;
 height: 100%;
 position: absolute;
 backface-visibility: hidden;
 perspective: 1000;
}
.vux-pop-out-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}

给你想要过渡页面的父元素给上这样的样式:

.router-view{
  width: 100%;
  position: absolute;
  -webkit-transition: all .3s cubic-bezier(.55,0,.1,1);
  -moz-transition: all .3s cubic-bezier(.55,0,.1,1);
  -ms-transition: all .3s cubic-bezier(.55,0,.1,1);
  -o-transition: all .3s cubic-bezier(.55,0,.1,1);
  transition: all .3s cubic-bezier(.55,0,.1,1);
  height:100%;
 }

html代码是这样的:

<template>
 <div id="app">
  <transition :name="transitionName">  
   <router-view class="router-view"></router-view>
  </transition>
 </div>
</template>

js代码是这样的:

export default {
  name: 'app',
  data(){
   return {
    transitionName:'vux-pop-in'
   }
  },
 }

这里的transitionName根据自己的需要去改变,我是监听路由去改变是vux-pop-in还是vux-pop-out的。

watch:{
  $route(to, from) {
   if(to.meta.index > from.meta.index){
    this.transitionName = 'vux-pop-in';
   }else{
    this.transitionName = 'vux-pop-out';
   }
  }
 }

这里当然要个路由这是参数index,分级。

总结

以上所述是小编给大家介绍的vue页面切换过渡transition效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
将查询条件的input、select清空
Jan 14 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
详解AngularJS 模块化
Jun 14 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 #Javascript
angular中子控制器向父控制器传值的实例
Oct 08 #Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 #Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 #Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 #Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 #Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 #Javascript
You might like
提问的智慧(2)
2006/10/09 PHP
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
php创建sprite
2014/02/11 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python Socket编程详细介绍
2017/03/23 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
2013年入党人员的自我鉴定
2013/10/25 职场文书
教师师德教育的自我评价
2013/10/31 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
女子职高个人自荐书
2014/02/01 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
cf战队收人广告词
2014/03/14 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
英语投诉信范文
2015/07/03 职场文书
2016继续教育研修日志
2015/11/13 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript