当映射数组在 react.js 中更改状态时应用过渡动画

Question

我有这三张图片是从州映射的。单击下一个按钮时，它会删除最后一个图像并将其添加为数组的第一个元素。

是否可以为这个过渡动画而不是活泼。我希望它随着宽度和不透明度的逐渐变化而向右滑动，类似于 3d 旋转木马。

这是它目前的样子的代码和框。 https://codesandbox.io/s/modern-cloud-z1j0jg?file=/src/App.js

Answer 1

要制作动画，您可以使用 css 过渡。但是，您可能必须保留一些额外的状态来控制动画何时开始或结束。这在 React 中不是很容易做到的事情。一些图书馆可以帮助您解决这个问题，例如 react-spring。