如何在样式组件中触发 CSS 动画？

【问题标题】：How to trigger css animation in styled-components?如何在样式组件中触发 CSS 动画？
【发布时间】：2019-04-11 13:55:56
【问题描述】：

通常，我们通过删除和添加具有 CSS 动画属性的类来解决此问题problem。如何使用 styled-components 库删除动画属性并快速重新添加以触发动画？

【问题讨论】：

【解决方案1】：

你可以使用 props 来改变样式，例如：

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

然后你可以在使用组件触发动画的时候传递一个prop：

<MyComp animate={booleanFlag} />

在这种情况下，您可以根据需要在 true 和 false 之间切换 animate 属性。也许使用父组件的状态。

【讨论】：