Tailwind と CSS を使用してアニメーション用の React ユーティリティ コンポーネントを作成しました: AnimateIn

私はしばらくの間、自分のプロジェクトで同じアニメーション パターンを使用して、要素を画面上でアニメーション化してきました。最も単純な形式では、不透明度 0 で要素のスタイルを設定し、次に CSS トランジションを 1 秒かけて不透明度 1 にスタイルを変更します。

その上に、トランジションする他のプロパティを追加したり、期間を変更したり、遅延を追加したり、カスタム イージングを設定したりすることで構築できます。

<AnimateIn/>は、プロジェクトにアニメーション効果をすぐに追加したいときにいつでもドロップできるように作成した再利用可能な React コンポーネントです。シンプルなユーティリティ コンポーネントであり、CSS アニメーションと Tailwind クラスを組み合わせて、最小限の労力で滑らかで目を引くアニメーションを作成します。

使い方を見てみましょう。コンポーネントをインポートした後、Tailwind クラスを使用してfromとto状態を定義します。ターゲット要素を<AnimateIn/>内でラップして、アニメーションが動き出すのを確認します。

 import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn>

ここでは、より多くのプロパティを使用して見出しとサブタイトルをアニメーション化する、もう少し複雑な例を示します。

 import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header>

見出しの例では、 <AnimateIn/>を使用して、フェードインと組み合わせたスライド効果を作成します。各プロパティがアニメーションにどのように影響するかを次に示します。

• asプロパティ: as="h1"を設定することで、アニメーションを<h1>要素としてレンダリングするように AnimateIn に指示します。

• fromプロパティとtoプロパティ: fromプロパティは、見出しを画面外で開始し ( translate-y-32単位下に移動)、非表示 ( opacity-0 ) にします。次に、 toプロパティは見出しを最終位置に移動し ( translate-y-0に戻り)、完全に表示されるようにします ( opacity-100 )。

• durationプロパティ: アニメーションは遅延なしですぐに開始されるように設定されており、わずか 300 ミリ秒間実行されます。

• classNameプロパティ: className="text-4xl" Tailwind のユーティリティ クラスを適用してフォント サイズを設定し、見出しを目立つようにします。

• styleプロパティ: カスタムのtransitionTimingFunction ( cubic-bezier(0.25, 0.4, 0.55, 1.4) ) は、アニメーションに独特の使いやすさを追加し、バウンスのような効果を与えます。

サブタイトルは、見出しを補完するために別のアニメーションのセットを使用し、一貫した視覚的な流れを作成します。

• asプロパティ: ここで、 as="h2" 、サブタイトルに適した<h2>要素としてコンポーネントをレンダリングします。

• fromプロパティとtoプロパティ: 字幕はゼロ ( scale-0 ) に縮小されて非表示 ( opacity-0 ) になり、その後自然なサイズ ( scale-100 ) にスケールアップされて完全に表示されます ( opacity-100 )。このスケーリング効果とフェードインを組み合わせると、アニメーションに深みが加わります。

• delayとdurationプロパティ: 字幕も 800 ミリ秒の遅延後に開始され、見出しが完全にアニメーション化された後に開始されます。この時差アプローチにより、各要素に焦点が当てられるようになります。

• classNameプロパティ: className="text-lg"サブタイトルのフォント サイズを設定します。これにより、見出しよりも小さくなりますが、それでも重要になります。

何が起こっているのかをよりよく理解するために、 Github にある<AnimateIn/>のソース コードを見てみましょう。

<AnimateIn/>は、 useStateフックを使用して、 fromプロパティでアニメーションの状態を初期化します。このプロパティは 1 つ以上の Tailwind ユーティリティ クラスである必要があり、アニメーションが開始される前にアニメーションの開始点の段階を設定します。

コンポーネントの最初のuseEffectフックは、モーションを減らすためのユーザー設定を尊重するためのものです。 (prefers-reduced-motion: reduce)メディア クエリをリッスンすることにより、アニメーションの動作はユーザーのシステム設定に基づきます。モーションを減らした方がよい場合は、アニメーションが完全にスキップされ、アニメーションの状態がtoプロパティに直接設定され、アクセスしやすいエクスペリエンスが可能になります。

2 番目のuseEffectフックには、アニメーション ロジックが存在します。ユーザーがモーションを減らすことを選択していない場合、コンポーネントは、アニメーションの状態を初期のfrom値から指定された遅延後の最後のto値に変更するタイマーを設定します。このトランジションにより、アニメーションの視覚効果が作成されます。

このフックのクリーンアップ関数 (return ステートメント) はタイマーをクリアし、アニメーションが完了する前にコンポーネントがアンマウントされた場合などの潜在的なメモリ リークを防ぎます。

React.createElement関数呼び出しは、コンポーネントのレンダリング メカニズムです。 as prop に基づいて HTML 要素を動的に作成し、さまざまな HTML 要素間でコンポーネントを使用できるようにします。 className 、 shadcn によって普及したcn関数を使用して構築されます。この関数は、Tailwind のユーティリティ クラス、prop として渡されるカスタムclassName 、および現在のアニメーション状態を組み合わせます。この動的なクラス割り当てにより、必要なスタイルと遷移が要素に適用されます。

さらに、アニメーション コンテナにスタイル プロパティを直接設定するために渡すことができるstyle属性があります。 transitionDuration 、 durationプロパティに基づいて設定されますが、ユーザーがモーションを減らしたい場合はインテリジェントに0msに切り替わり、コンポーネントの機能を維持しながらアニメーションを効果的に無効にします。

独自のプロジェクトで<AnimateIn/>を使用したいが、すでにshadcn が使用されている場合は、必要なものがすべて揃っているので、 AnimateIn.tsx をダウンロードしてコンポーネントに追加するだけです。

それ以外の場合は、 Tailwindと、tailwind クラスをマージするための便利なユーティリティであるmxcnをインストールする必要があります。

shadcn と同様、<AnimateIn/> は、コピーしてアプリに貼り付け、ニーズに合わせてカスタマイズできる再利用可能なコンポーネントであることを目的としています。コードはあなたのものです。

また、 animate-in.vercel.appにある<AnimateIn/>を使用してさまざまなアニメーションを作成して遊ぶための素晴らしいデモ ページをまとめました。

ここでも公開されています