I have these three images that are being mapped from state. When the next button is clicked, it removes the last image and adds it as the first element of the array.

Is it possible to animate this transition rather than it being snappy. I want it to slide to the right as the width and opacity are gradually changing, similar to a 3d carousel.

This is a codesandbox of what it currently looks like. https://codesandbox.io/s/modern-cloud-z1j0jg?file=/src/App.js

CodePudding user response：

To animate, you can use css transitions. However you'll probably have to keep some extra state to control when the animation has started or ended. This is not something that is very easy to do in React. Some libraries help you with this, such as react-spring, for example.