css - 如何在 styled-components 中触发 css 动画？

Question

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

Answer 1

您可以使用 Prop 来改变样式，例如:

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

然后你可以在使用组件触发动画时传递一个 Prop :

<MyComp animate={booleanFlag} />

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