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);
  }

 

posted @ 2022-06-10 14:58  桃李子  阅读(200)  评论(0编辑  收藏  举报