web-dev-qa-db-ja.com

ReactのcomponentWillUnmountで休暇アニメーションをどのように処理する必要がありますか？

React.jsでの退場アニメーションの処理方法について誰かが洞察を提供できるかどうか疑問に思っていました。私はGreensock TweenMaxを使用しており、入力アニメーションはcomponentDidMountで正常に機能しますが、コンポーネントをアニメーション化する信頼できる方法を見つけていません。

私は、componentWillUnmountに入れるべきだと思っていますが、React=は、コンポーネントを手放す準備ができたことを示すコールバックメカニズムを提供していません。アニメーションはReactに対して非同期であるため完了します。代わりに、アニメーションのほんの数分の1が表示され、コンポーネントが消えて、アニメートする次のコンポーネントに置き換えられます。

これは、私がReact 9か月前に使い始めてから苦労している問題です。私は仕方がありませんが、ReactCSSTransitionGroup以外に解決策がなければならないと思います。私は、特にリアクションルーターの場合、面倒で扱いにくいことがわかりました。

javascriptanimationreactjstweenmax
32
jaredkwright

ReactTransitionGroup（その上にReactCSSTransitionGroupが構築されます）は、非同期の出入りを可能にする基本コンポーネントです。 JSベースのアニメーションにフックするために使用できるライフサイクルフックを提供します。 ドキュメントリスト 許可されるフック：

ReactTransitionGroupはアニメーションの基礎です。 （上記の例のように）子が宣言的に追加または削除されると、特別なライフサイクルフックが呼び出されます。 ReactCSSTransitionGroupsの使用を開始するには、3つの方法があります。

_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)

これは、TransitionGroupに最初にマウントされたコンポーネントのcomponentDidMount()と同時に呼び出されます。 callbackが呼び出されるまで、他のアニメーションの発生をブロックします。 TransitionGroupの最初のレンダリングでのみ呼び出されます。

componentDidAppear()

これは、callbackに渡されたcomponentWillAppear関数が呼び出された後に呼び出されます。

componentWillEnter(callback)

これは、既存のTransitionGroupに追加されたコンポーネントのcomponentDidMount()と同時に呼び出されます。 callbackが呼び出されるまで、他のアニメーションの発生をブロックします。 TransitionGroupの最初のレンダリングでは呼び出されません。

componentDidEnter()

これは、callbackに渡されたcomponentWillEnter関数が呼び出された後に呼び出されます。

componentWillLeave(callback)

これは、ReactTransitionGroupから子が削除されたときに呼び出されます。子は削除されていますが、ReactTransitionGroupはcallbackが呼び出されるまでDOMに保持します。

componentDidLeave()

これは、willLeavecallbackが呼び出されたときに呼び出されます（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);
},
_
47
Michelle Tilley

チェックアウト React-Motion

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

Cheng Louは、Reactチームの開発者です。

彼は現在のReactCSSTransitionGroupの問題について話します。

彼はこの問題を修正するために React-Motion を開発しました。

Css transitionsを使用していませんが、うまく機能しているようで、非常に決定的です。 ReactCSSTransitionGroupはトランジションを中断できないため、扱いにくいようです。

2
Bodman