Анимация колеса рулетки с динамическими данными с сервера

Question

Я работаю на колесе рулетки, которое вращается в 2 этапа

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>