Реакция: остановка запуска анимации стилевых компонентов при первом монтировании компонента

Question

У меня есть styled-component, который получает реквизит, чтобы определить, какую анимацию использовать.Это контролирует значок стрелки, который при активном вращении «открыт», а при неактивности остается «закрытым».

Вот как выглядят анимации styled-component и две keyframes:

const rotate_down = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(90deg);
  }
`;

const rotate_up = keyframes`
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(0deg);
  }
`;

const OpenUserSettings = styled.div`
  cursor: pointer;
  width: 20px;
  height: 20px;
  transition: 0.3s;
  animation: ${props => (props.rotate ? rotate_down : rotate_up)} 0.5s ease
    forwards;
  margin-top: 2px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  & > img {
    width: 5px;
  }
`

Переданная в rotate prop является логическим значением, которое переключается с помощью onClickобработчик в компоненте React:

    <OpenUserSettings
      rotate={arrowDown}
      onClick={() => {
        this.setState(prevState => ({
          arrowDown: !prevState.arrowDown
        }));
      }}
    >
      <img src={OpenArrow} alt="menu drop down arrow" />
    </OpenUserSettings>

Это работает, и при нажатии на стрелку rotate prop передается в OpenUserSettings и успешно переключается между rotate_up и rotate_down keyframes.

Теперь моя проблема заключается в том, что при первом монтировании компонента React для arrowDown по умолчанию устанавливается значение false, что означает, что реквизит rotate будет иметь значение false.Это заставляет styled-component установить анимацию на rotate_up при первом монтировании.Я подумал, что это будет трудно визуализировать, поэтому проверьте это, чтобы увидеть, что я описываю:

Вы можете видеть, когда страница обновляется rotate_up анимация срабатывает очень быстро.Мне нужно, чтобы стрелка оставалась закрытой, но мне не нужна анимация rotate_up для запуска при первой загрузке, чтобы закрыть ее.Это ситуация для чего-то вроде react-transition-group, где я могу контролировать начальный ввод или это что-то, что можно обрабатывать с помощью логики?

Answer 1

Я думаю, вам будет легче с CSS transform / transition здесь, а не animation.Вот код:

const rotateDeg = props.rotate ? '90deg' : '0deg';

const OpenUserSettings = styled.div`
  cursor: pointer;
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
  transform: rotate(${rotateDeg});
  margin-top: 2px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  & > img {
    width: 5px;
  }
`

Я не совсем понял, в каком положении вы хотели стрелку, поэтому вам, возможно, потребуется флоп 0deg и 90deg, и я думаю, что на самом деле это может быть -90deg, но, надеюсь, это поможет.

Редактировать

Ваш вопрос был на самом деле, как остановить анимацию.Вы можете приостановить анимацию CSS с помощью animation-play-state.В этом случае вы могли бы смонтировать компонент с помощью animation-play-state: paused;, а затем добавить дополнительную опору, чтобы изменить его на running при первом щелчке, но это кажется излишне сложным IMO.

Подробнее о animation-play-state.