最重要——设置id

设置下载中心id为downloadCenter,id=”downloadCenter”

方法

点击导出时触发的方法为
//event为方法触发时的dom对象
// 获取body
let bodyElement = document.body
// 获取下载中心 创建div img
let downloadCenter = document.getElementById(‘downloadCenter’)
let fileDiv = document.createElement(‘div’)
let fileImg = document.createElement(‘img’)
fileDiv.id = ‘dowmLoadFile’
fileDiv.style.position = ‘fixed’
fileDiv.style[‘z-index’] = 10
fileDiv.style.opacity = 1
fileImg.src = require(‘IMAGES/report/downloading-file.png’)
//将div添加到body
bodyElement.appendChild(fileDiv)
let dowmLoadFile = document.getElementById(‘dowmLoadFile’)
//将文件图片添加到div
dowmLoadFile.appendChild(fileImg)
let downloadCenterLeft = downloadCenter.getBoundingClientRect().left
let downloadCenterTop = downloadCenter.getBoundingClientRect().top
//将图片赋值到鼠标点击位置
dowmLoadFile.style.left = ${event.clientX - 20}px
dowmLoadFile.style.top = ${event.clientY - 20}px
let dowmLoadFileLeft = dowmLoadFile.getBoundingClientRect().left
let dowmLoadFileTop = dowmLoadFile.getBoundingClientRect().top
let translateX = dowmLoadFileLeft > downloadCenterLeft ? -(dowmLoadFileLeft - downloadCenterLeft) : (downloadCenterLeft - dowmLoadFileLeft)
let translateY = dowmLoadFileTop > downloadCenterTop ? -(dowmLoadFileTop - downloadCenterTop) : (downloadCenterTop - dowmLoadFileTop)
dowmLoadFile.animate(
{transform: translate(${translateX}px,${translateY}px), opacity: 0},
{
duration: 1000, //ms
delay: 0, //ms
iterations: 1, //1, 2, 3 … Infinity
direction: ‘alternate’, //‘normal’, ‘reverse’等
easing: ‘ease-in-out’, //‘linear’, ‘ease-in’等
fill: ‘forwards’ //‘backwards’, ‘both’, ‘none’, ‘auto’
}
)
//执行完动画后移出div
Promise.all(
dowmLoadFile.getAnimations({subtree: true})
.map(animation => animation.finished)
).then(() =>
dowmLoadFile.remove()
)

说明

getBoundingClientRect（）这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。