React-Transition-Groupを使用してReactに緊密な遷移アニメーションを実装する方法は？

react-transition-groupを使用して、シームレスなスイッチングアニメーションを実現します

React開発では、 react-transition-groupコンポーネント間のアニメーションスイッチングを実装するための一般的なライブラリです。ただし、実際のアプリケーションでは、開発者はしばしば、コンポーネントの切り替え時に表示される空白の領域など、アニメーション効果が理想的ではない状況に遭遇し、アニメーションが十分にスムーズではありません。この記事では、この問題を分析し、解決策を提供します。

問題の説明：目標は、右から左にスライドするコンポーネントスイッチングアニメーションを実現することであり、ギャップなしでアニメーションプロセス中に2つのコンポーネントを密接に接続する必要があります。しかし、実際の効果は、コンポーネント間に空白があることです。

質問コードの例：

<switchtransition>
  <csstransition classnames="checkout" key="{this.state.isPhone}" timeout="{500}">
    {this.state.isphone？ （
      <phone handleback="{()"> this.setphonestate（false）} handlephoneclick = {this.handlephoneclick} />
    ）：（
      <main handlephoneclick="{this.handlePhoneClick}"></main>
    ）}
  </phone></csstransition>
</switchtransition>

対応するCSSスタイル：

 .checkout-enter {
  変換：translatex（100％）;
}
.checkout-enter-active {
  変換：transtex（0）;
  遷移：500msすべて。
}

.checkout-exit {
  変換：transtex（0）;
}
.checkout-exit-active {
  変換：translatex（-100％）;
  遷移：500msすべて。
}

問題分析：上記のCSSコードは、アニメーションのインおよびアウト効果を定義しますが、アニメーションプロセス中のコンポーネントの位置関係を考慮していないため、コンポーネント間のギャップが生じます。

解決策：重要なのはposition: absoluteプロパティを使用し、アニメーションプロセス中のコンポーネントの位置を正確に制御します。

修正されたCSSスタイル：

 .checkout-enter {
  位置：絶対;
  右：0;
  変換：translatex（100％）;
}
.checkout-enter-active {
  変換：transtex（0）;
  遷移：500msすべて。
}

.checkout-exit {
  位置：絶対;
  左：0;
  変換：transtex（0）;
}
.checkout-exit-active {
  変換：translatex（-100％）;
  遷移：500msすべて。
}

position: absolute 、コンテナの右と左に着信コンポーネントを配置し、アニメーションプロセス中にコンポーネントが常に密接に接続されていることを確認し、空白の領域を排除し、アニメーション効果をシームレスに切り替えます。これにより、アニメーションがよりスムーズになり、ユーザーエクスペリエンスが向上します。

以上がReact-Transition-Groupを使用してReactに緊密な遷移アニメーションを実装する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。