在上传歌曲的时候, 我们发现屏幕上只有左下角有个文字提示: 文件正在上传, 文件上传成功. 这对于用户来说, 看不看得见是一个问题, 更重要的是影响用户体验, 用户还不一定知道是否上传了呢. 因此我们需要做一件事情. 那就是在上传歌曲的时候, 加载一个loading动画, 让用户理解正在上传.
基本结构
loading的基本结构为
<style>
@keyframes loading{
0% {
transform: scale(1.0);
}
100% {
transform: scale(0.1);
}
}
.site-loading{
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.site-loading.active {
visibility: visible;
}
.site-loading::before{
content:'';
display: block;
border-radius: 50%;
background: #ccc;
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
animation: loading 2s infinite alternate-reverse linear;
}
</style>
<div id="siteLoading" class="site-loading"></div>
开始的时候我们让这个loading看不见, 即visibility: hidden;
. 当上传时, 我们给div一个active类. 让动画出现. 上传完成后再将active去除, 消失动画.
创建loading.js
为了达到这个效果, 还需要一个loading.js文件. 这个loading文件用于注册动画的show和hide动作.
window.eventHub.on('beforeUpload', ()=>{
this.view.show()
})
window.eventHub.on('afterUpload', ()=>{
this.view.hide()
})
beforeUpload用于添加active类, 此时动画加载.
afterUpload用于删除active类, 此时动画隐藏.
如何触发呢? 当然是在upload-song.js文件中. 这个文件是处理文件上传相关事宜的.
'BeforeUpload': function(up, file) {
// 每个文件上传前,处理相关的事情
window.eventHub.emit('beforeUpload')
}
'FileUploaded': function(up, file, info) {
window.eventHub.emit('afterUpload')
}
最后别忘了将这个文件引入到admin.html中去,
这样我们在上传文件的时候就可以了加载动画了.