18

React Animations (React CSS Transition Group)の公式ドキュメントを読んできましたが、特に CSS 内でトランジションを設定している場合に、タイムアウト値が何に使用されるのかが少しわかりません。値は遅延、アニメーションの持続時間、またはそのクラスが適用されてから削除されるまでの時間ですか? また、CSS で設定されたトランジションの持続時間とどのように関連していますか?

たとえば、コンポーネントの出入り時に単純なフェードイン/アウトを行う場合は、CSS 内で不透明度とトランジションの持続時間も設定します。コンポーネントは、この値で渡されたタイミングまたは CSS 内で設定された期間に基づいてアニメーション化されますか?

公式ドキュメントで提供されている例を次に示します。

私のReactコンポーネント

<ReactCSSTransitionGroup 
  transitionName="example" 
  transitionEnterTimeout={500} 
  transitionLeaveTimeout={300}
>
  {items}
</ReactCSSTransitionGroup>

私の .css ファイル

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

ありがとう！

4

2 に答える 2

5

ここで私の答えを参照してください: https://stackoverflow.com/a/372​​06517/3794660

要素をフェードアウトしたいとします。クラスを追加/削除し、最終的に要素を削除する前に、React は CSS アニメーションが完了するまで待機する必要があるため、期間が必要です。そうしないと、DOM 要素がすぐに削除されるため、完全なアニメーションを見ることができません。

https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroupChild.js#L97

ここでこのコードを見ている場合: https://github.com/facebook/react/blob/v15.3.2/src/addons/transitions/ReactCSSTransitionGroupChild.js#L95あなたのためのタイムアウト。これは廃止され、React に CSS アニメーションの継続時間を明示的に伝えることになっています (おそらく、推測には大きなオーバーヘッド/矛盾があるためです。

于 2016-10-21T20:46:36.280 に答える
0

From the page you linked:

You'll notice that animation durations need to be specified in both the CSS and the render method; this tells React when to remove the animation classes from the element and -- if it's leaving -- when to remove the element from the DOM.

于 2016-10-21T16:49:58.873 に答える