延迟CSS动画样式化组件

Question

在满足某些条件时如何将不透明度延迟到零？加载程序栏是使用js控制的，延迟是否仅使用CSS即可完成？

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

演示（单击添加按钮）

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

我要实现的目标：进度条加载到100％，在整个过程消失之前延迟1秒。

Answer 1

是的，CSS transitions是这样：

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

div:hover {
  opacity: 0;
}

<div></div>

转换将在2s延迟后花费1s。

Answer 2

您可以使用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;
`;

演示： https://codesandbox.io/s/mq51n0jmrp