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 相关文章推荐
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
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
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
js实现一键复制功能
2017/03/16 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
javascript防抖函数debounce详解
2019/06/11 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
实例介绍Python中整型
2019/02/11 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
节能宣传周活动总结
2014/05/08 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
2014年终个人工作总结
2014/11/07 职场文书
新郎新娘答谢词
2015/01/04 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery