私はしばらくの間、自分のプロジェクトで同じアニメーション パターンを使用して、要素を画面上でアニメーション化してきました。最も単純な形式では、不透明度 0 で要素のスタイルを設定し、次に CSS トランジションを 1 秒かけて不透明度 1 にスタイルを変更します。 その上に、トランジションする他のプロパティを追加したり、期間を変更したり、遅延を追加したり、カスタム イージングを設定したりすることで構築できます。 は、プロジェクトにアニメーション効果をすぐに追加したいときにいつでもドロップできるように作成した再利用可能な React コンポーネントです。シンプルなユーティリティ コンポーネントであり、CSS アニメーションと Tailwind クラスを組み合わせて、最小限の労力で滑らかで目を引くアニメーションを作成します。 <AnimateIn/> 使い方を見てみましょう。コンポーネントをインポートした後、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/> プロパティ: を設定することで、アニメーションを 要素としてレンダリングするように AnimateIn に指示します。 as as="h1" <h1> プロパティと プロパティ: プロパティは、見出しを画面外で開始し ( 単位下に移動)、非表示 ( ) にします。次に、 プロパティは見出しを最終位置に移動し ( に戻り)、完全に表示されるようにします ( )。 from to from translate-y-32 opacity-0 to translate-y-0 opacity-100 プロパティ: アニメーションは遅延なしですぐに開始されるように設定されており、わずか 300 ミリ秒間実行されます。 duration プロパティ: Tailwind のユーティリティ クラスを適用してフォント サイズを設定し、見出しを目立つようにします。 className className="text-4xl" プロパティ: カスタムの ( ) は、アニメーションに独特の使いやすさを追加し、バウンスのような効果を与えます。 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 と プロパティ: 字幕も 800 ミリ秒の遅延後に開始され、見出しが完全にアニメーション化された後に開始されます。この時差アプローチにより、各要素に焦点が当てられるようになります。 delay duration プロパティ: サブタイトルのフォント サイズを設定します。これにより、見出しよりも小さくなりますが、それでも重要になります。 className className="text-lg" 何が起こっているのかをよりよく理解するために、 のソース コードを見てみましょう。 Github にある <AnimateIn/> は、 フックを使用して、 プロパティでアニメーションの状態を初期化します。このプロパティは 1 つ以上の Tailwind ユーティリティ クラスである必要があり、アニメーションが開始される前にアニメーションの開始点の段階を設定します。 <AnimateIn/> useState from コンポーネントの最初の フックは、モーションを減らすためのユーザー設定を尊重するためのものです。 メディア クエリをリッスンすることにより、アニメーションの動作はユーザーのシステム設定に基づきます。モーションを減らした方がよい場合は、アニメーションが完全にスキップされ、アニメーションの状態が プロパティに直接設定され、アクセスしやすいエクスペリエンスが可能になります。 useEffect (prefers-reduced-motion: reduce) to 2 番目の フックには、アニメーション ロジックが存在します。ユーザーがモーションを減らすことを選択していない場合、コンポーネントは、アニメーションの状態を初期の 値から指定された遅延後の最後の 値に変更するタイマーを設定します。このトランジションにより、アニメーションの視覚効果が作成されます。 useEffect from to このフックのクリーンアップ関数 (return ステートメント) はタイマーをクリアし、アニメーションが完了する前にコンポーネントがアンマウントされた場合などの潜在的なメモリ リークを防ぎます。 関数呼び出しは、コンポーネントのレンダリング メカニズムです。 prop に基づいて HTML 要素を動的に作成し、さまざまな HTML 要素間でコンポーネントを使用できるようにします。 、 関数を使用して構築されます。この関数は、Tailwind のユーティリティ クラス、prop として渡されるカスタム 、および現在のアニメーション状態を組み合わせます。この動的なクラス割り当てにより、必要なスタイルと遷移が要素に適用されます。 React.createElement as className shadcn によって普及した cn className さらに、アニメーション コンテナにスタイル プロパティを直接設定するために渡すことができる 属性があります。 、 プロパティに基づいて設定されますが、ユーザーがモーションを減らしたい場合はインテリジェントに に切り替わり、コンポーネントの機能を維持しながらアニメーションを効果的に無効にします。 style transitionDuration duration 0ms 独自のプロジェクトで を使用したいが、すでに 使用されている場合は、必要なものがすべて揃っているので、 てコンポーネントに追加するだけです。 <AnimateIn/> shadcn が AnimateIn.tsx をダウンロードし それ以外の場合は、 と、tailwind クラスをマージするための である をインストールする必要があります。 Tailwind 便利なユーティリティ mxcn shadcn と同様、<AnimateIn/> は、コピーしてアプリに貼り付け、ニーズに合わせてカスタマイズできる再利用可能なコンポーネントであることを目的としています。コードはあなたのものです。 また、 にある を使用してさまざまなアニメーションを作成して遊ぶための素晴らしいデモ ページをまとめました。 animate-in.vercel.app <AnimateIn/> でも公開されています ここ
