vue路由切换之淡入淡出的简单实现


Posted in Javascript onOctober 31, 2019

路由跳转的淡入淡出

在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果,提升我们程序的动效设计

想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性

<transition name="fade" mode="in-out">
 <router-view ></router-view>
</transition>

css过渡类名:

组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:

fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。

fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。

fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。

fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。

过渡的样式:

.fade-enter {
 opacity:0;
}
.fade-leave{
 opacity:1;
}
.fade-enter-active{
 transition:opacity .5s;
}
.fade-leave-active{
 opacity:0;
 transition:opacity .5s;
}

过渡模式mode:

in-out:新元素先进入过渡,完成之后当前元素过渡离开。

out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。

以上这篇vue路由切换之淡入淡出的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中的常用事件总结
Dec 27 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
vue component组件使用方法详解
Jul 14 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
vue-router之实现导航切换过渡动画效果
Oct 31 #Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 #Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 #Javascript
vue弹出框组件封装实例代码
Oct 31 #Javascript
使用zrender.js绘制体温单效果
Oct 31 #Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 #Javascript
selenium+java中用js来完成日期的修改
Oct 31 #Javascript
You might like
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
zend framework多模块多布局配置
2011/02/26 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
浅析Python中的序列化存储的方法
2015/04/28 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
python构建基础的爬虫教学
2018/12/23 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
办公室主任岗位职责
2013/11/08 职场文书
顶岗实习计划书
2014/01/10 职场文书
学校四群教育实施方案
2014/06/12 职场文书
中央空调节能方案
2014/06/15 职场文书
研究生导师推荐信
2014/09/06 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB