第5讲：VUE3工程中实现页面加载中效果和页面切换动画效果。
发布时间
阅读量：
阅读量
VUE3工程发布后的运行流程首先启动HTML界面，在HTML界面中嵌入JavaScript脚本，并逐步执行以生成最终的展示内容。
基于这一加载机制，在网页开发过程中，默认情况下网页会因网络连接问题而无法正常渲染内容。为了确保页面能够顺利展示，在实际开发过程中通常会采用以下策略：首先，在HTML代码生成阶段就嵌入一个表示"正在 loading"的状态标记；待所有相关网页数据完成获取并成功mount到内存后（即页面已经成功解析完毕），则会立即移除该状态标记。这样既保证了页面渲染的连贯性又避免了因临时状态导致的用户体验问题。
在public/index.html文件中加入显示状态图标并配置相关的CSS样式表以满足显示效果的需求。
<div id="dvtop-app-loading">
<div>
<div class="dvtop-loader">
<div class="dvtop-loading"></div>
</div>
<div class="text">页面加载中</div>
</div>
</div>在src/App.vue隐藏加载中。
mounted(){
this.hideAppLoading();
},
methods: {
hideAppLoading: function () {
//删除加载中的图层
const loadingLayer: any = document.getElementById("dvtop-app-loading");
loadingLayer.style.opacity = "0.0";
setTimeout(() => {
document.body.removeChild( loadingLayer);
}, 500); //此处时间要和#dvtop-app-loading的class中transition一致
},
}对于页面切换动画效果借助animate.css动画包实现。
npm install animate.css -S将src/App.vue中
<router-view v-slot="{ Component }">
<transition mode="out-in" :duration="300"
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut">
<keep-alive>
<component :is="Component"/>
</keep-alive>
</transition>
</router-view>具体动画可根据需求调用 animate.css，并访问以下官方网站以查看和试用：[Animate.css | A cross-browser library of CSS animations.Anime.css 是一款适用于多种项目的现成 CSS 动画库。它特别适合用于强调效果、主页设计、滑动效果以及吸引注意力的提示信息。]
启动下面这个链接并在浏览器中访问http://127.0.0.1:8080/即可运行该库
cd dvtop-designer
npm run serve全部评论 (0)
还没有任何评论哟~