下载数据那种飞入的动画效果

在/utils/index.js里面写方法：

addPointAnimation = (context) => {

  const btn = document.querySelector('.moving-box .el-button--primary')

  // const btnLoad = document.querySelector('.moving-dataload .el-button--primary')

  const $ball = document.createElement('div')

  $ball.className = 'moving-point'

  // 针对数据下载设置顶部和左侧距离

  // let docWid = document.body.offsetWidth // (包括边线的宽)

  // let docHeig = document.body.offsetHeight // (包括边线的高)

  // console.log(docHeig / 1.04, btnLoad.offsetParent.offsetTop)

  $ball.style.top = btn.offsetTop + 'px'

  $ball.style.left = btn.offsetLeft + 'px'

  // $ball.style.top = btnLoad ?  docHeig / 1.04 + 'px' : btn.offsetTop + 'px' // 577,840

  // $ball.style.left = btnLoad ? 340 + 'px' : btn.offsetLeft + 'px' // 340

  $ball.style.position = 'fixed'

  $ball.style.width = '14px'

  $ball.style.height = '14px'

  $ball.style.zIndex = 1003

  $ball.style.background = '#666'

  $ball.style.opacity = '0'

  $ball.style.borderRadius = '50%'

  document.body.append($ball)

  let top = document.querySelector('.el-icon-download').getBoundingClientRect().top - 4 + 'px'

  let left = document.querySelector('.el-icon-download').getBoundingClientRect().left + 12 + 'px'

  setTimeout(() => {

    $ball.style.top = top

    $ball.style.left = left

    $ball.style.opacity = '1'

    $ball.style.transition = 'top 0.5s ease-in-out,left 0.7s ease-in-out, opacity 0.5s ease-in-out'

  }, 20)

  setTimeout(() => {

    $ball.style.zIndex = '0'

    const download = document.querySelector('.download-num')

    download.style.transform = 'scale(0.3)'

  }, 800)

  setTimeout(() => {

    const download = document.querySelector('.download-num')

    if (download) {

      download.style.transform = 'scale(1)'

      $ball.style.opacity = '0'

    }

    context.$store.dispatch('RefreshUndownload')

  }, 1100)

}

使用

import {  addPointAnimation } from '@/utils/index'

addPointAnimation(this)