广平网站建设,广东网站设计专业团队,免费网站为何收录比较慢,电商平台是做什么Ⅰ、前言
当我们每次打卡页面#xff0c;切换路由#xff0c;甚至于异步组件#xff0c;都会有一个等待的时间 #xff1b;为了不白屏#xff0c;提高用户体验#xff0c;添加一个 loading 过度动画是 非常 常见的 #xff1b;那么这几种场景我们应该把 loading 加在哪…Ⅰ、前言
当我们每次打卡页面切换路由甚至于异步组件都会有一个等待的时间 为了不白屏提高用户体验添加一个 loading 过度动画是 非常 常见的 那么这几种场景我们应该把 loading 加在哪里呢 文章目录Ⅰ、前言Ⅱ、vue3 常见过度1、 首次打开页面时 loading2、 路由切换时、异步组件 loading Ⅲ、 添加过度动画Ⅱ、vue3 常见过度
针对以下 3 种情况 做了一下整理 ① 首次打开页面时 ② 路由切换时 ③ 异步组件显示时 1、 首次打开页面时 loading
在页面首次打开的加载内容是最容易的通过根目录 index.html文件在 div idapp 里添加内容就是过度内容
bodydiv idapph1加载中....../h1/divscript typemodule src/src/main.js/script
/body当vue实例创建完成通过.mount() 方法挂载到 idapp 的div 里会替换掉里的loading内容 2、 路由切换时、异步组件 loading
路由切换过度 需要先了解一个vue3 的内置组件 SuspenseSuspense 提供 2 个插槽 #default : 一个要加载的内容 #fallback: 一个加载种显示的内容
Suspensetemplate #defaultrouter-view //templatetemplate #fallbackh1加载中....../h1/template
/Suspense同理( 异步组件的切换 )
templateSuspensetemplate #defaultAsyncComp v-if vitblie //templatetemplate #fallbackh1加载中....../h1/template/Suspensebutton clickopen 切换 /button
/template
script setupimport { defineAsyncComponent , ref } from vue;const asyncComp defineAsyncComponent(()important(./asyncComp.vue));const vitblie ref(false);function open(){vitblie.value !vitblie.value;}
/script异步组件也是可以使用相同的方法 Ⅲ、 添加过度动画
添加过度动画需要先了解 vue3 内置组件 Component 和 Transition
Component: 非常简单只有一个 is 显示该组件 可以用来组件切换 如 templateComponent :isvisible ? TestComp : / /templateTransition : 里插入的内容 显示/隐藏 添加过度动画 通过 name 属性来拼接 class 如 : templatetransition nameanimeTestComp v-ifvisblte / /transition/template设置样式通过 name 属性 这里 anime-enter-active: 过度态 ( 设置 隐藏 显示 过度的时间等参数) anime-leave-active: 过度态 ( 设置 显示 隐藏 过度的时间等参数) anime-enter-from anime-enter-to 隐藏 显示 开始和结束的样式 anime-leave-from anime-leave-to 显示 隐藏 开始和结束的样式 组合起来
templaterouter-view v-slot{ Component } transition nameanimecomponent :isComponent /transition/router-view
template
style scoped
.anime-enter-active,
.anime-leave-active {transition: all 1s;
}
.anime-leave-from { transform: translateY(0); }
.anime-leave-to { transform: translateY(-100%); }.anime-enter-from { transform: translateY(100%); }
.anime-enter-to { transform: translate(0); }
/style相关文章 : Ⅰ. vue3 性能优化总汇 ------------------------------------------------------------------------------------------------ Ⅱ. vue2.7 过度指南 ---------------------------------------------------------------------------------------------------- Ⅲ. 升级vue3问题总汇 ------------------------------------------------------------------------------------------------- Ⅳ. vue3 配置 JSX语法 ------------------------------------------------------------------------------------------------
