задержка непрозрачности анимации CSS в стилевых компонентах

Question

Как отложить непрозрачность до нуля, когда в styled-component выполняется определенное условие?Это выполнимо с помощью 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;
`;

вы можете добавить переходное свойство для достижения того же