Question

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

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

2）数据到达时，它只是旋转从服务器获取的角度。

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

我面临的问题是从1）到2）的过渡不是无缝的。旋转器意外地停止了一段随机的时间，然后开始2）（有限旋转）。

这是我的js小提琴，是场景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>

具有来自服务器的动态数据的轮盘转盘动画

1 个答案: