记录--仿加入购物车飞入动画效果

// 小球单独组件
<div class="ball-wrap" v-for="(item, k) of balls" :key="k"
  :style="{
    opacity: item.show,
    top: item.start.y + 'px',
    left: item.start.x + 'px',
    transitionDuration: (item.show ? (duration/1000) : 0)+'s',
    'transition-timing-function': xTimeFunction[!item.ani ? 0 : 1],
    transform: 'translate3d(' + item.offset.x + 'px, 0, 0)',
    zIndex
  }"
>
  <div class="ball" :class="{ball3d:is3dSheet}"
    :style="{
      marginLeft: -size/2 + 'px',
      marginTop: -size/2 + 'px',
      padding: size + 'px',
      backgroundImage: ballImage,
      backgroundColor: ballColor,
      transitionDuration: (item.show ? (duration/1000) : 0) + 's',
      transform: 'translate3d(0,' + item.offset.y + 'px,0)',
      'transition-timing-function': yTimeFunction[item.ani ? 0 : 1]
    }"
  ></div>
</div>

<script>
export default {
  props: {
    // 球的大小
    size: {
      type: Number,
      default: 8
    },
    //3D
    is3dSheet: {
      type: Boolean,
      default: true
    },
    //持续时间
    duration: {
      type: Number,
      default: 800
    },
    zIndex: {
      type: Number,
      default: 9999
    },
    ballImage: {
      type: String,
      default: ''
    },
    ballColor: {
      type: String,
      default: '#409eff'
    }
  },
  data() {
    return {
      balls: [],
      xTimeFunction: ['ease-in', 'ease-out'],  // x轴动画渐入渐出效果
      yTimeFunction: ['ease-in', 'ease-out'],  // y轴动画渐入渐出效果
      endPos: {
        x: sessionStorage.getItem('downIconLeft'),   // 因为浏览器可能会手动放大缩小，所以要监听window的resize时间，获取顶部元素位置
        y: sessionStorage.getItem('downIconTop')
      }
    };
  },
  mounted() {
    this.initBalls()
  },
  methods: {
    // 外部调用方法，传入点击时元素的xy位置数值
    drop(pos){
      this.endPos.x = sessionStorage.getItem('downIconLeft')
      this.endPos.y = sessionStorage.getItem('downIconTop')
      let ball 
      let duration=this.duration
      for (var i = 0; i < this.balls.length; i++) {
        if(this.balls[i].show){continue}
        ball = this.balls[i]
      }
      ball.start.x = pos.x
      ball.start.y = pos.y
      ball.offset.x = this.endPos.x - pos.x 
      ball.offset.y = this.endPos.y - pos.y 
      if(ball.offset.y > 0){
        ball.ani = 1
      }else{
        ball.ani = 0
      }
      ball.show = 1
        
      setTimeout(()=>{
        ball.show = 0
      }, duration)
      debounce(this.initBalls,  duration+200, this)()
    },
    
    initBalls(){
      const balls = [{
          show: 0,
          start: {
            x: 0,
            y: 0
          },
          offset: {
            x: 0,
            y: 0
          },
          ani: 0
      }]
      this.balls = balls
    }
  }
}
</script>

// 下载中心
<span class="export_center_icon" ref="downRef">下载中心</span>

// 获取下载按钮位置
const getIconSite = ()=>{
  let downIconSite = downRef?.value?.getBoundingClientRect()
  sessionStorage.setItem('downIconLeft', downIconSite.left.toFixed(2))
  sessionStorage.setItem('downIconTop', downIconSite.top.toFixed(2))
}

// 监听屏幕变化按钮位置
window.addEventListener('resize', debounce(()=>{
  getIconSite()
}), 500)

onMounted(()=>{
  getIconSite()
})

onBeforeUnmount(()=>{
  window.removeEventListener('resize')
})

// 组件调用
import ball from '@/components/ball/index.vue' 

<ball ref="cartBtn"></ball> 

<button @click='download($event)'>下载</button> 

// 适当方法里调用 
download = ()=>{ 
  cartBtn.value.drop({ 
    x: e.clientX, 
    y: e.clientY 
  }) 
}