小球抛物线过渡效果（react）

react实现：

html:

  {/*<!-- 小球落脚点 -->*/}
  <div className="favorites-wrap"></div>
        
  {/* 小球 */}
 <div className="ball"></div>

css：

/*生成小球，并定义初始位置*/
.ball {
  width: 60px;
  height: 60px;
  background-color: #ff4800;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 300px;
  transition: left 1s linear, top 1s ease-in;
  //display: none;
}

js：

  // 获取动画小球元素
      var ball = e.currentTarget.parentNode.lastChild;
      // 显示小球
      ball.style.display="block";
      // 获取小球的落脚点元素
      let warp = document.querySelector('.favorites-wrap');
      // 获取小球落脚点顶端 距离 页面顶端距离
      let H = warp.offsetTop;
      // 获取小球落脚点左边 距离 页面左边距离
      let L = warp.offsetLeft;
      // 小球落脚点 左边 距离 页面左边距离 减 小球距离页面左边的距离 进行取整
      let ballX =  Math.floor(L - ball.getBoundingClientRect().left);
      // 小球落脚点 顶端 距离 页面顶端距离 减 小球距离页面顶端的距离 进行取整
      let ballY =  Math.floor(H - ball.getBoundingClientRect().top);

      // 动画过渡时 给小球赋值
      setTimeout(() => { 
        ball.style.top =  ballY + 'px';
        ball.style.left = ballX + 120 + 'px';
        ball.style.transition = 'left .4s linear, top .4s cubic-bezier(0.49, -0.29, 0.75, 0.41)';
      }, 20)
      // 小球过渡结束事件
      ball.addEventListener("transitionend",()=>{
        console.log(111)
        // 过度结束小球隐藏
        ball.style.display="none";
        // 过度结束小球设置成初始化值
        ball.style.top =  0 + 'px';
        ball.style.left = 100 + 'px';
      })