Как сделать несколько анимаций 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