Песочница: https://codesandbox.io/s/nifty-darkness-0z8tm
Задача: есть слайдер с несколькими слайдами внутри, у каждого слайда свой ID. Каждые несколько секунд (в интервале) меняется ID текущего активного слайда в слайдере, и на такую смену слайда слайдер крутится влево.
В каждом слайде есть статус ('Current' у текущего активного слайда и 'Empty' у всех остальных). Нужно добиться такого эффекта, чтобы анимации отработали одновременно и синхронно (т.е. слайдер поехал, и пока он едет плавно меняется статус в слайде).
Что есть сейчас: анимации по отдельности работают отлично, но стоит только вложить одну в другую - все работает не так, как хотелось бы. Сначала начинает крутиться слайдер, анимация заканчивается, и только потом срабатывает анимация дочерних элементов (благодаря appear у transition).
Чтобы увидеть анимацию статусов нужно убрать 'key' у 'div' в 'transition' (файл в песочнице: '/src/components/Slider', строка 4), если же этот ключ оставить, то наоборот отработает анимация слайдера (но без плавного перехода статуса).
Вопрос: что нужно сделать, чтобы добиться поведения описанного в задаче? Возможно, подход в реализации неверен.
Средний
