「ReactJS」読書メモ Threeteen_html/css_WEB-ITnose

アニメーション

アニメーションはユーザー エクスペリエンスをより流動的で自然にすることができます。 React でアニメーションを使用するにはどうすればよいですか? React の TransitionGroup プラグインを CSS3 と組み合わせることで、アニメーション効果をプロジェクトに簡単に統合できます。

React のアニメーションは宣言的な方法で実装されます。TransitionGroup は、CSS の使用を簡素化するために、適切なレンダリングとバッファリングの時点で要素クラスを戦略的に追加および削除します。言い換えれば、必要なのは、これらのクラスに適切なアニメーション効果を記述することだけです。

インターバル レンダリングでは、パフォーマンスを犠牲にしてスケーラビリティと制御性が向上します。この方法では、より多くのレンダリングが必要になりますが、CSS の外側のコンテンツ (スクロールバーの位置や Canvas 描画など) をアニメーション化することもできます。

CSS グラデーション グループ

サンプル プログラムであるアンケート ビルダーがアンケート エディターで質問のリストをどのようにレンダリングするかを見てみましょう。

<ReactCSSTransitionGroup transitionName="question">	{questions}</ReactCSSTransitionGroup>

ReactCSSTransitionGroup は、

var ReactCSSTransitionGroup = React.addons.ReactCSSTransitionGroup;

ステートメントによってファイルの先頭に導入されるプラグインです。適切なタイミングでコンポーネントの再レンダリングを自動的に処理し、現在のグラデーションの状態に応じてグラデーション グループのクラスを調整して、コンポーネント スタイルの変更を実現します。

グラデーション クラスにスタイルを追加します

慣例により、transitionName="question" を要素に追加することは、それに 4 つのクラス (question-enter、question-enter-active、question-leave) を追加することを意味します。そして質問-休暇-アクティブ。子コンポーネントが ReactCSSTransitionGroup に出入りすると、CSSTransitionGroup プラグインはこれらのクラスを自動的に追加または削除します。

アンケート エディターで使用されるグラデーション スタイルは次のとおりです。

.survey-editor .question-enter{	transform: scale(1.2);	transition: transform o.2s cubic-bezier(.97, .84, .5, 1.21);}.survey-editor .question-enter-active{	transform:scale(1);}.survey-editor .question-leave{	transform: translateY(o);	opacity: 0;	transition: opacity 1.2s, transform 1s cubic-bezier(5z, -0.25, .52, .95);}.survey-editor .question-leave-active{	opacity: 0;	transform: translateY(-100%);}

これらの .survey-editor セレクターは ReactCSSTransitionGroup では必須ではなく、単にこれらのスタイルがエディターでのみ有効になるようにするために使用されます。

グラデーション ライフ サイクル

question-enter と question-enter-active の違いは、question-enter クラスはコンポーネントがグラデーション グループに追加された直後に追加されるのに対し、question-enter クラスは追加されることです。 enter -active は、次のレンダリング中に追加されます。この設計により、グラデーションの開始方法、終了方法、およびグラデーションの進行方法を簡単に定義できます。

たとえば、アンケートエディターの質問がリストに追加されると、最初にスケール(1.2)で拡大され、その後徐々に通常のスケール(1)の状態にフェードアウトします。合計で 0.2 秒かかります。 。これにより、ポップアウト効果が得られます。

デフォルトでは、グラデーション グループは開始アニメーションと終了アニメーションの両方を有効にします。コンポーネントにtransitionEnter = {false}またはtransitionLeave = {false}属性を追加することで、それらの一方または両方を無効にできます。どのアニメーション効果を選択するかを制御することに加えて、次のように、構成可能な値に基づいて特定の状況でアニメーションを無効にすることもできます。

<ReactCSSTransitionGroup	transitionName="question"	transitionEnter={this.props.enableAnimations}	transitionLeave={this.props.enableAnimations}>	{questions}</ReactCSSTransitionGroup>