代码之家 › 专栏 › 技术社区 › rahulserver

利用服务器的动态数据制作轮盘赌动画

css3 jquery javascript

rahulserver · 技术社区 · 7 年前

我正在做一个轮盘赌,在两个阶段旋转

1) 当用户单击spin按钮时,它只是无限旋转,直到数据来自服务器。

我们正在从服务器获取数据,因为它包含一些我们不想发送给客户端的敏感信息。

我面临的问题是,从1)到2)的转变并非天衣无缝。微调器意外停止随机时间,然后开始2)(有限旋转)。

这是我的jsfiddle,它是场景的最简单的复制 https://jsfiddle.net/ej2c5k7z/6/

<div id="spinning"  style="background-color: red; display: inline-block">
  abcdefghijkl
</div>

javascript:

let element = $("#spinning");

// Simulate random interval for data being fetched from server
let randomIntervalSeconds = Math.random()*10;
console.log(randomIntervalSeconds);
// TODO: keep rotating the element for randomIntervalSeconds
// I used below code along with setInterval with 1001 ms interval
let intervalKey = setInterval(function(){
    element.css({"transform": "rotate(" + 360 + "deg)", "transition-duration": 1 + "s"});
},1001)


setTimeout(function(){
    // Simulate data arrived callback.
  clearInterval(intervalKey);
    element.css({"transform": "rotate(" + (360+48) + "deg)", "transition-duration": 1 + "s"});

}, randomIntervalSeconds*1000)

我只是想知道是否有可能让微调器(或任何div)无限旋转,直到数据到达并过渡到有限旋转?

1 回复 | 直到 7 年前

ecg8 7 年前

这也许不是你想要的,但也许它能激励你超越目标。我试着给你的div一个类,让它总是旋转的,然后在超时过期后,我移除旋转动画并将div旋转必要的度数。它似乎“啪”的到位有点太多了,我还没有(还没有?)想办法解决这个问题,但我明天再试试。

let element = $("#spinning");

// Simulate random interval for data being fetched from server
let randomIntervalSeconds = Math.random()*10;
console.log(randomIntervalSeconds);
// TODO: keep rotating the element for randomIntervalSeconds
// I used below code along with setInterval with 1001 ms interval



setTimeout(function(){
    // Simulate data arrived callback.
		element.removeClass("go");
    element.css({"transform": "rotateZ(" + (360+48) + "deg)", "transition-duration": 1.5 + "s"});

}, randomIntervalSeconds*1000)

#spinning {
	background-color: red;
	display: inline-block;
	margin: 50px;
}
.go {
	animation: spin 1s infinite linear;
}
@keyframes spin {
	from { transform: rotateZ(0deg) }
	to { transform: rotateZ(360deg) }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="spinning" class="go">
  abcdefghijkl
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前