延迟CSS动画样式化组件

Question

How to delay opacity to zero when certain condition is met? The loader bar is controlled using js, is the delay doable using just css?

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

demo (click on the add button)

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

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

Answer 1

Yes it is with CSS transitions :

 div { background: #ddd; width: 100px; height: 10px; border-radius: 3px; opacity: 1; transition: opacity 1s 2s; } div:hover { opacity: 0; } 

 <div></div> 

The transition will take 1s after a 2s delay.

Answer 2

You can use transition-delay :

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

Demo: https://codesandbox.io/s/mq51n0jmrp