Как мне обрабатывать анимацию отпуска в компонентеWillUnmount в React?

Мне было интересно, сможет ли кто-нибудь дать представление о том, как они обрабатывают анимацию отпуска в React.js. Я использую Greensock TweenMax, а анимация ввода отлично работает на componentDidMount, но я не нашел надежного способа анимировать компонент.

Я чувствую, что он должен идти в componentWillUnmount, но React не предоставляет механизма обратного вызова для указания, когда вы готовы отпустить компонент. Поэтому анимация перехода никогда не завершается, так как анимации асинхронны для React. Вместо этого вы видите крошечную долю секунды анимации, компонент исчезает и заменяется следующим анимированным компонентом.

Это проблема, с которой я боролся, так как начал использовать React 9 месяцев назад. Я не могу не думать, что там должно быть решение, кроме ReactCSSTransitionGroup, которое я считаю громоздким и утонченным, особенно с реактивным маршрутизатором.

Ответы

Ответ 1

ReactTransitionGroup (на котором построен ReactCSSTransitionGroup) - базовый компонент, который позволяет асинхронно вводить и уходить. Он предоставляет привязки для жизненного цикла, которые вы можете использовать для привязки к анимации на основе JS. Список документов разрешенные крючки:

ReactTransitionGroup является основой для анимации. Когда дети декларативно добавляются или удаляются из него (как в примере выше), на них вызываются специальные крючки жизненного цикла. Существует три способа начать использовать ReactCSSTransitionGroups:

import ReactCSSTransitionGroup from 'react-addons-css-transition-group' // ES6
var ReactCSSTransitionGroup = require('react-addons-css-transition-group') // ES5 with npm
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; // ES5 with react-with-addons.js

componentWillAppear(callback)

Это называется в то же время, что и componentDidMount() для компонентов, которые изначально установлены в TransitionGroup. Он блокирует другие анимации до тех пор, пока не будет вызван callback. Он вызывается только при первоначальном рендеринге TransitionGroup.

componentDidAppear()

Это вызывается после того, как вызывается функция callback, которая была передана в componentWillAppear.

componentWillEnter(callback)

Это называется одновременно с componentDidMount() для компонентов, добавленных в существующий TransitionGroup. Он блокирует другие анимации до тех пор, пока не будет вызван callback. Он не будет вызываться при первоначальном рендеринге TransitionGroup.

componentDidEnter()

Вызывается после того, как вызывается функция callback, которая была передана в componentWillEnter.

componentWillLeave(callback)

Это вызывается, когда дочерний элемент был удален из ReactTransitionGroup. Хотя ребенок удален, ReactTransitionGroup будет хранить его в DOM до тех пор, пока не будет вызван callback.

componentDidLeave()

Это вызывается, когда вызывается willLeave callback (в то же время, что и componentWillUnmount).

^{Анимация - Низкоуровневый API}

Чтобы анимировать дочерний элемент, вам нужно запустить анимацию в componentWillLeave и вызвать предоставленный callback, когда анимация будет завершена. Например, здесь JSFiddle, показывающий компонент, который шагает - анимирует его дочерние элементы: http://jsfiddle.net/BinaryMuse/f51jbw2k/

Соответствующий код для анимации:

componentWillLeave: function(callback) {
  this._animateOut(callback);
},

_animateOut(callback) {
  var el = ReactDOM.findDOMNode(this);
  setTimeout(function() {
    TweenLite.to(el, 1, {opacity: 0}).play().eventCallback("onComplete", callback);
  }, this.props.animateOutDelay);
},

Ответ 2

Отъезд React-Motion

https://www.youtube.com/watch?v=1tavDv5hXpo

Cheng Lou - разработчик команды React.

Он рассказывает о проблемах с текущей группой ReactCSSTransitionGroup.

Он разработал React-Motion для устранения этой проблемы.

Хотя он не использует css-переходы, он, кажется, работает хорошо и очень детерминирован. Где, как ReactCSSTransitionGroup, кажется, очень сложно, поскольку вы не можете прерывать переходы.