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

您可以添加过渡属性以实现相同的效果

延迟样式组件中的CSS动画不透明度

1 个答案: