Блог

Главная - Вопросы по программированию - задержка непрозрачности анимации css в стилизованных компонентах

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

#javascript #css #reactjs #styled-components

#javascript #css — код #reactjs #стилизованные компоненты

Вопрос:

Как отложить непрозрачность до нуля при выполнении определенного условия в 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 секунда, прежде чем все это исчезнет.

Ответ №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;
`;

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

Комментарии:

1. Я хочу, чтобы прогресс загружался до конца, а затем только исчезал.

2. Можете ли вы привести мне пример

3. попробуйте нажать на add кнопку, вы заметите, что панель исчезла до завершения анимации загрузки.

Метки: