javascript - 带有来自服务器的动态数据的轮盘赌动画

Question

我正在研究一个分两个阶段旋转的轮盘

1) 当用户点击旋转按钮时，它会无限旋转，直到数据来自服务器。

2) 当数据到达时，它只是按照从服务器获取的 Angular 旋转。

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

我面临的问题是从 1) 到 2) 的过渡不是无缝的。微调器意外停止随机时间，然后启动 2)(有限旋转)。

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

html:

<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)无限旋转直到数据到达并无缝过渡到有限旋转？

Answer 1

这可能不是您正在寻找的东西，但也许它可以激励您超越球门线。我试着给你的 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>