react实现转盘动画


转盘动画方法如下:

/**
   * 点击转动转盘
   */
  const turnCircle = () => {
    let runDeg = +(Math.random() * 360).toFixed(0) + 2160; // 先转6圈,最后再转随机的0-1圈
    const table = document.getElementById('innerCircle'); // 转盘节点(这里是一个转盘图片)
    // 清除状态,恢复到初始状态
    table.style.transition = ``;
    table.style.transform = `rotate(0)`;
    setTimeout(() => { // 留点时间给清除状态
      table.style.transition = `transform 5s ease 0s`; // 时间/速度自由控制
      table.style.transform = `rotate(${runDeg}deg)`;
    }, 10);
  }