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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
JS 动态加载脚本的4种方法
May 05 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 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
PHP中str_replace函数使用小结
2008/10/11 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
一个简单的js动画效果代码
2010/07/20 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
Python自定义类的数组排序实现代码
2016/08/28 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python实现机器人行走效果
2018/01/29 Python
Django框架多表查询实例分析
2018/07/04 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
财产公证书样本
2014/04/04 职场文书
小学数学课后反思
2014/04/23 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang