react实现转盘动画
2024-10-22 14:24:38
转盘动画方法如下:
/**
* 点击转动转盘
*/
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);
}
最新文章
- discuz阅读权限的设置作用
- iOS开发之UITableView使用总结
- 第二个UI脚本--Python+selenium之unittest+HTMLtestRunner及python的继承
- 比较C++中的4种类型转换方式(转自http://blog.csdn.net/hrbeuwhw/article/details/7884797)
- hdu_5648_DZY Loves Math
- iOS开发-正则表达式3种形式
- jQuery系列 第五章 jQuery框架动画特效
- yum设置本地源
- Linux 一块网卡配置多个IP的方法
- unix socket服务器
- [c/c++] programming之路(1)、编写程序打开记事本、计算器等
- 跨域(六)——window.name
- 基于WebGL的三维的物联网平台技术
- Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在
- MFC中插入符的生成
- ajax跨域问题(三种解决方案)
- C#应用视频教程2.2 OPENGL虚拟仿真介绍
- 03_java之基本语法
- 【sessionInfo】使用说明
- 0003_Linux基础之常用命令