Как запустить анимацию CSS в стилевых компонентах?

Question

Обычно мы решаем эту проблему , удаляя и добавляя класс с атрибутами CSS-анимации. Как удалить атрибут анимации и добавить его снова, чтобы быстро запустить анимацию с помощью библиотеки стилей-компонентов?

Answer 1

Вы можете использовать реквизит для изменения стилей, например:

const MyComp = styled.div`
  transition: width 2s;
  width: ${props => props.animate ? "20px" : "10px"};
`

Затем вы можете пропустить опору, когда используете компонент для запуска анимации:

<MyComp animate={booleanFlag} />

В этом случае вы можете при необходимости переключать animate prop между true и false. Возможно использование состояния из родительского компонента.