I'm working on a small project in React, where I have a list of five div's containing text. On the left slide I have a slider that should take the position of the item that is selected. In the initial state, the slider takes the position of the first element. If, for example, the third item is selected, the slider needs to move to the position of the third item. When item 2 is selected consequently, the slider needs to move to the position of the second item. I already tried something but this doesn't give me the desired result, as the slider always starts from the position of item 1. A minimal reproducible example can be found here:

https://codesandbox.io/s/stoic-tess-thcjp?file=/src/App.js

Any advice would be welcome.

CodePudding user response：

Instead of using animation, you could use a combination of transition and transform css properties.

You can check the below example, might be what you are looking for.

https://codesandbox.io/s/black-mountain-wu2mb?file=/src/styles.css