delay css animation opacity in styled-components

问题

How to delay opacity to zero when certain condition is met in styled-component? Is it doable using css?

const Wrap = styled.div`
  background: #ddd;
  width: 100px;
  height: 10px;
  border-radius: 3px;
  opacity: ${props => (props.currentStep === props.steps ? 0 : 1)};
`;

demo

https://codesandbox.io/s/7k20zw5z10

What I want to achieve: the progress bar load till 100%, delay 1 second before the whole thing fade away.

回答1:

const Wrap = styled.div`
  background: #ddd;
  width: 100px;
  height: 10px;
  border-radius: 3px;
  opacity: ${props => (props.currentStep === props.steps ? 0 : 1)};
  transition: opacity 0.6s linear;
`;

you can add transition property to achieve the same

来源：https://stackoverflow.com/questions/55745325/delay-css-animation-opacity-in-styled-components