Как дождаться окончания анимации в чистом javascript?

Question

Я пытаюсь сделать бесконечный цикл для карусели, когда я щелкаю по желаемому элементу div, он будет центрирован в желаемой позиции, если я щелкну по элементу, который находится рядом с центрированной позицией, все работает нормально, но если он большечем на 1 позицию от центра, это вызывает эффект, который не следует обычной логике.

Я попытался решить проблему, проверив расстояние от центра и затем переместив элементы 1 на 1 n раз, ноя думаю, потому что цикл не ждет, пока анимация не закончится, я получаю этот странный эффект.

Окончательный результат должен создать бесконечное ощущение карусели, когда вы нажимаете на элемент, который находится в 5 позициях отпо центру это будет по центру, а те, которые находятся вне поля зрения, будут скользить в соответствующем направлении, чтобы создать петлю

любая помощь будет оценена, я относительно новичок в веб-разработке, поэтому хорошо объясненный ответ будет высоко оценен

JS:

const serviceList = document.querySelectorAll('.service__block');

serviceList.forEach(service => {
  service.addEventListener('click', () => {
    markSelectedService(service);
    moveService(checkDistance(service));
  });
});

//Adds the class to the clicked service
function markSelectedService(service) {
  removeSelectedClass();
  service.classList.add('selected');
}

//Removes the selected class from all the services
function removeSelectedClass() {
  serviceList.forEach(service => {
    service.classList.remove('selected');
  });
}

//Check distance from center
function checkDistance(service) {
  let distance = service.dataset.order - 4;
  return distance;
}

//Move the service 1 by 1 n times
function moveService(distance) {
  if (distance > 0) {
    for (var i = 0; i < distance; i++) {
      serviceList.forEach(service => {
        service.dataset.order = parseInt(service.dataset.order) - 1;
        if (parseInt(service.dataset.order) === -1) {
          service.dataset.order = 11;
        }
      });
    }
  } else if (distance < 0) {
    distance = distance * -1;
    for (var i = 0; i < distance; i++) {
      serviceList.forEach(service => {
        service.dataset.order = parseInt(service.dataset.order) + 1;
        if (parseInt(service.dataset.order) === 12) {
          service.dataset.order = 0;
        }
      });
    }
  }
}

Ссылка на codepen: https://codepen.io/tomyshoam/pen/yLLLYyQ

Answer 1

Если вы хотите подождать, пока конец анимации не сработает, вы вставляете setInterval и устанавливаете интервал времени для времени вашей анимации. Пример:

var i = 0;
var animationInterval = setInterval(function () {

   //YOUR LOGIC HERE

   if (++i === distance) {
     window.clearInterval(animationInterval);
   }
}, 500);

Обновление

После некоторых попыток, я думаю, я получил все, как вы хотели, хотя это не лучший способ сделать это. Я скопировал список значков, один справа и один слева, таким образом значки будут перемещаться на другую сторону только тогда, когда они находятся очень далеко от поля зрения пользователя и не будут вызывать такое странное поведение.

Код ниже: https://codepen.io/diogoperes/pen/oNNNBGY