如何在样式化组件中制作多个onClick动画？

Question

我有2个按钮，当我单击时我希望为其设置动画。问题在于，当单击第二个按钮时，由于React重新渲染文档，动画将重新启动。我该如何解决？我是StyledComponents的新手。

[这里是一个出现问题的密码箱。] https://codesandbox.io/s/naughty-joliot-v3mlf

谢谢。

Answer 1

您应该将样式组件移出功能，然后将道具（active和active2）传递给样式组件。

在此分叉您的示例代码，并进行一些修改：

https://codesandbox.io/s/tender-curran-0bxf0?file=/src/App.js