How to trigger css animation in styled-components?

Question

Usually, we solve this problem by removing and adding a class with CSS animation attributes. How to remove animation attribute and add again quickly to trigger animation using styled-components library?

Answer 1

You could use props to change the styles, for example:

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

You can then pass a prop when you use the component to trigger the animation:

<MyComp animate={booleanFlag} />

In this case, you can toggle the animate prop between true and false as necessary. Perhaps using state from the parent component.