Как я должен обрабатывать анимацию отпуска в componentWillUnmount в React?

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

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

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

27
animation javascript reactjs tweenmax

2 ответов

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

ReactTransitionGroup является основой для анимации. Когда дети декларативно добавляются или удаляются из него (как в примере выше), на них вызываются специальные крючки жизненного цикла. Есть 3 способа начать использовать 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()

это называется после

46

проверить React-Motion

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

Чэн Лу является разработчиком в команде React.

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

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

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

2