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

Question

通常，我们通过删除和添加具有 CSS 动画属性的类来解决这个问题。如何使用样式组件库删除动画属性并再次快速添加以触发动画？

Answer 1

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

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

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

<MyComp animate={booleanFlag} />

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