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 @   桃李子  阅读(229)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示