How to animate dynamic data that is nested within another animation?

Question

Vue.js

Sandbox: https://codesandbox.io/s/nifty-darkness-0z8tm

Task: there is a slider with several slides inside, each slide has its own ID. Every few seconds (in the interval) the ID of the currently active slide in the slider changes, and on such a slide change, the slider rotates to the left.
Each slide has a status ('Current' for the current active slide and 'Empty' for all others). It is necessary to achieve such an effect that the animations work simultaneously and synchronously (i.e. the slider moves, and while it moves, the status in the slide changes smoothly).

What is now:animations individually work fine, but if you just nest one inside another, everything does not work as you would like. First, the slider starts spinning, the animation ends, and only then does the animation of the child elements work (thanks to the appear of the transition).
To see the animation of the statuses, you need to remove the 'key' from the 'div' in the 'transition' (file in the sandbox: '/src/components/Slider', line 4), but if you leave this key, the slider animation will work on the contrary (but without a smooth status transition).

Question: what needs to be done to achieve the behavior described in the task? Perhaps the approach in the implementation is wrong.

Answer 1

Change transitionto transition-group, shift it to the left by the width of the slide; we show slides not from the active one, but from the previous active one; in order not to see how the first slide, which became the last, leaves for the end, we set slides z-index. Here is the shitcode .