Переход CSS не запускается после insertBefore

Question

Я пытаюсь создать горизонтальную карусель с петлями.

Вы можете проверить код здесь: https://codepen.io/nobitta/pen/xNOyrj

В данный момент я застрял. Мне удалось заставить его работать, однако CSS-переход, имитирующий движение вправо, не срабатывает, когда вы нажимаете «Далее».

Я уже провел какое-то исследование, и некоторые говорят, что это связано с оптимизацией браузеров, и что установка таймаута или вызов offsetWidth или getBoundingRect() должны помочь, так как это заставляет браузер выполнять повторную визуализацию. Однако даже с этими советами я не смог заставить его работать ...

Я что-то делаю не так или здесь что-то упускаю? Что я должен делать?

Заранее спасибо ~

Answer 1

Мне удалось это исправить, поиграв со свойством margin-left.

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

Вы можете проверить кодовую ручку в вопросе для более подробной информации.

Надеюсь, это кому-нибудь поможет.