第5讲：VUE3工程中实现页面加载中效果和页面切换动画效果。

VUE3工程发布后的运行过程为先加载html面，再通过html页中的js加载单页面js来渲染页面并显示。

根据这个加载过程，实现页面加载中的原理是预先在html中显示加载中，再单页面数据加载完成在mounted时隐藏加载中，即实现想要的效果。

在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/>修改为如下代码。

    <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.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.https://animate.style/运行如下代码，在浏览器中打开http://127.0.0.1:8080/即可访问。

cd dvtop-designer
npm run serve

第5讲：VUE3工程中实现页面加载中效果和页面切换动画效果。相关推荐

css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title><meta ...
android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
element中使用loading,加载中
前言: 在element中使用loadding的时候,在js中调用的,还是不太方便,这里把他封装下. 先写一个 loading.js 文件: import { Loading } from 'elem ...
深入浏览器之页面加载中的计算机网络
当你在浏览器中输入 rainbowinpaper.com 并且按下回车之后发生了什么? 但在说之前我们还是要先了解一下网络分层的概念. 网络分层我们最早接触的网络分层应该是OSI七层参考模型. OS ...
页面加载事件html5,JavaScript页面加载事件实例讲解
一.onload 加载事件 onload 是 window 对象的一个事件,也可以省略 window 直接使用. 常用方式: 这个事件是等待页面加载完成之后,再执行注意:该事件相比于在中的
html 判断页面加载完成,Javascript判断页面是否加载完成
很多时候我们在使用document.getElementById的时候直接在script标签中获取对象,然后使用,此时程序会出现该对象为undefined. var dom=document.getE ...
android的提示页面,android 页面加载中，友情提示界面-Fun言
先是布局页面 android:layout_width="fill_parent" android:layout_height="fill_parent" an ...
js如何在当前页面加载springmvc返回的页面_手写SpringMVC学习
前面我们学习了spring框架源码,做了一些自己手写的学习,最近,我们开始学习springMVC框架的学习 ,springMVC框架,相信大家不陌生了,所以这里不做过多的介绍了. SpringMVC以 ...
ajax离开页面方法,如果用户在页面加载完成之前离开页面，则触发jQuery ajaxError（）处理程序...
我们使用jQuery的全局ajaxError()处理函数来警告用户任何AJAX失败: $(document).ajaxError(function() { $("There was a ne ...
Android 三种方式实现自定义圆形页面加载中效果的进度条
转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现定义res/anim/loading.xml如 ...

第5讲：VUE3工程中实现页面加载中效果和页面切换动画效果。

第5讲：VUE3工程中实现页面加载中效果和页面切换动画效果。相关推荐

最新文章

热门文章