【Vue.js 入门与实战】--组件切换-应用切换动画和mode方式

简介: 【Vue.js 入门与实战】--组件切换-应用切换动画和mode方式

组件切换-应用切换动画和mode方式

 

当前组件已经可以实现正常切换,但是组件切换时有些突兀,这是需要添加动画来解决。

vue.js,点击起步,找到动画,多个组件的过渡,

多个组件的过渡简单很多 - 我们不需要使用 key attribute。相反,我们只需要使用动态组件

<transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component>

</transition>

只需要 component Transform 包起来。使用如下代码实现:

第一步:

  <transition>

<component :is=comName></component>

  </transition>

第二步:

 <style>

.v-enter,

.v-leave-to{

opacity:0;

transform:translateX(150px);

}

.v-enter-active,

.v-leave-active{

Transition: all 0.5s ease:

 </style>

 </head>

image.png

 此时执行会发现,有实现切换,但是有阴影出现。需要通过设置使其消失,此时应该写成:

 <style>

.v-enter,

.v-leave-to{

opacity:0;

transform:translateX(150px);

}

.v-enter-active,

.v-leave-active{

Transition: all 0.5s ease:

opacity:0;

transform:translateX(150px);

}

<transition mode=out-in>

 </transition>

 </style>

 </head>

<这是 mode 属性,设置组件切换时候的 模式>

 

 

相关文章
|
10月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
785 2
|
11月前
|
存储 监控 JavaScript
基于布隆过滤器的 Node.js 算法在局域网电脑桌面监控设备快速校验中的应用研究
本文探讨了布隆过滤器在局域网电脑桌面监控中的应用,分析其高效空间利用率、快速查询性能及动态扩容优势,并设计了基于MAC地址的校验模型,提供Node.js实现代码,适用于设备准入控制与重复数据过滤场景。
351 0
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1262 0
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
10月前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
515 3
|
11月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
1096 1
|
11月前
|
资源调度 负载均衡 JavaScript
使用PM2工具部署Vue.js应用于服务器
以上步骤完成之后,你就成功利⽤ PM⼆工具将 Vuejs 应⽰程序部署至服 务 器,并且配合反向代理实现了高效稳定访问及负载均衡功能。
569 0
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
866 1
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
604 0
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信
300 0