vue路由切换之淡入淡出的简单实现
更新时间：2019年10月31日 14:37:52 作者：影夜随风
今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
路由跳转的淡入淡出
在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计
想让路由有过渡动画，需要在<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路由切换之淡入淡出的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue3中引入scss文件的方法步骤,在实际项目中,各种样式往往有很多重复的情况,为了能够使样式的后续开发和维护更加惬意,将这些共同的代码进行命名然后调用这些变量是一个很好的选择,需要的朋友可以参考下2023-08-08
本文主要主要讲述对threejs的一些api进行基本的封装，在vue3项目中来实现一个可视化的3d项目，包含了一些常用的功能，场景、灯光、摄像机初始化，模型、天空盒的加载，以及鼠标点击和悬浮的事件交互,感兴趣的朋友可以参考下2023-06-06
Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现
本文主要介绍了Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了详解.vue文件解析的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue配置后台接口方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
vue3+element-plus props中的变量使用 v-model 报错及解决方案
这篇文章主要介绍了vue3+element-plus props中的变量使用 v-model 报错及解决方案,prop 是单向数据流,这里只能用:model-value,不能用v-model,本文给大家介绍的非常详细,需要的朋友可以参考下2023-10-10
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
这篇文章主要介绍了Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-11-11
Vue关于element穿梭框进行的修改成table表格穿梭框方式
这篇文章主要介绍了Vue关于element穿梭框进行的修改成table表格穿梭框方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了Vue3中引入Pinia存储库使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue后台管理添加多语言功能的实现示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
最新评论