javascript - 延迟样式组件中的 css 动画不透明度

Question

如何在样式组件中满足特定条件时将不透明度延迟为零？使用 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

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;
`;

你可以添加过渡属性来实现同样的效果