CSS переход не заканчивается после 3 успешных попыток

Question

У меня есть базовая c Реагируйте настройкой приложения, чтобы продемонстрировать эту проблему.

https://codesandbox.io/s/spring-forest-7ff6b

Если вы нажмете «Далее», дайте примерно 1 Через 2 секунды между щелчками происходит переход с 1 на 2, с 2 на 3, с 3 на 4 происходит без перехода, а затем все прерывается, потому что я слушаю transitionend, чтобы включить новый переход.

Я не мог воспроизвести эту проблему в Safari, но Chrome 79.0.3945.120 она каждый раз терпела неудачу.

Я пробовал оба onTransitionEnd из React, а также подключал своих собственных слушателей событий. Тот же результат.

Не удалось найти потенциальных клиентов во время моих поисков.

Answer 1

Мне не удалось надежно работать с onTransitionEnd или более прямым transitionend слушателем событий, но я смог добиться тех же результатов, используя CSS анимационные слушатели.

<div onAnimationEnd={onNavigationEnd} />