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

Question

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

Answer 1

您可以使用道具来更改样式，例如：

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

使用组件触发动画时，您可以传递道具：

<MyComp animate={booleanFlag} />

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