Как запустить анимацию при смене реквизита (через приставку) в React Native?

Question

У меня есть наложенное представление в приложении React Native, которое мне нужно анимировать на экране и после него, когда пользователь нажимает кнопку.Я знаю, как позиционировать вид и анимировать его, но не могу понять, как запустить анимацию.

В моем хранилище с избыточностью есть очень простое состояние с флагом isOpen, указывающим, открыта ли панель или закрыта.Я отображаю состояние на реквизиты компонента панели, и когда изменяется реквизит isOpen, я хочу запустить анимацию открытия или закрытия.Очевидно, что если пользователь нажимает кнопку переключения в середине анимации, текущая анимация должна быть отменена.

Это должно быть просто, но я не могу найти никаких примеров.Любая помощь будет высоко ценится.

Answer 1

React Native

Чтобы начать анимацию при изменении props, вы можете просто start свою анимацию в componentDidUpdate. Вот пример:

componentDidUpdate(prevProps) {
    if (this.props.isOpen !== prevProps.isOpen) {
        this.state.animation.start();
    }
}

Предполагается, что ваша анимация определена в состоянии компонента.

Реагировать (Браузер) :

[Не относится к этому вопросу, но потенциально полезно.]

Простой способ сделать это - использовать CSS-переходы. Что вы можете сделать, это дать компоненту панели класс CSS для closed (или open, но я считаю, что использовать закрытый / свернутый как стиль проще, потому что тогда открыто по умолчанию).

Затем в рендере вашей панели:

render() {
    const { isOpen } = this.props;

    return <div className={ 'panel' + (isOpen ? '' : ' closed') }></div>
}

И в вашем CSS:

.panel {
    /* some other styles */
    transition: .5s ease-in;
}

.closed {
    height: 0;
}

Таким образом, CSS может обрабатывать логику анимации, и ваша проблема с нажатием кнопки открытия / закрытия до завершения текущей анимации.

Вот документы по переходу CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Редактировать : Недостатком этого метода является то, что высота должна быть явно установлена ​​при открытой панели.

Вот небольшой пример кода:

function togglePanel() {
  const panel = document.querySelector('div.panel');
  if (panel.classList.contains('closed')) {
    panel.classList.remove('closed');
  } else {
    panel.classList.add('closed');
  }
}

.panel {
  background-color: #00c0de;
  height: 4rem;
  overflow: hidden;
  transition: .5s ease-in;
}

.closed {
  height: 0;
}

<button onclick='togglePanel()'>Toggle Panel</button>

<div class='panel closed'>
  <span>Hello, I'm the panel</span>
</div>