ヒント
このライブラリが気に入ったら、その作成者をサポートすることを検討してください。
React Awesome Revealは、TypeScriptで書かれたReactアプリのライブラリであり、交差点Observer APIを使用してアニメーションを表示し、ビューポートに要素がいつ表示されるかを検出します。アニメーションは感情によって内部的に提供され、ハードウェアアクセラレーションの恩恵を受けるためにCSSアニメーションとして実装されています。
このパッケージをアプリへの依存関係として追加するには、単に実行する
npm install react-awesome-reveal @emotion/react --saveまたは、糸を使用している場合：
yarn add react-awesome-reveal @emotion/reactまたは、PNPMを使用している場合（私が強く提案するように）：
pnpm add react-awesome-reveal @emotion/reactReactからのインポートエフェクトは、Fade Effect：The Fade Effect：The Fade Effectに驚くべきものです。
import { Fade } from "react-awesome-reveal" ;次に、アニメーション化するコンポーネントをラップするだけです。
< Fade >
< p > I will gently appear as I enter the viewport </ p >
</ Fade > 現在サポートされている効果は、 Bounce 、 Fade 、 Flip 、 Hinge 、 JackInTheBox 、 Roll 、 Rotate 、 Slide 、 Zoomです。詳細については、animate.cssドキュメントを参照してください。
バージョン3以降、注意シーカーアニメーションは、 AttentionSeekerコンポーネントによって包まれています。これは、レンダリングするアニメーションを指定するeffectと呼ばれるプロップ（デフォルトは"bounce”になります）を受け入れます。サポートされている効果は、 ”bounce" 、 "flash" 、 "headShake” 、 "heartBeat" 、 "jello” 、 "pulse" 、 "rubberBand" 、 “shakeX" “shake” 、 "shakeY” 」、「シェーク」、 "swing” 、 "tada" 、 “wobble”です。
繰り返しますが、詳細については、animate.cssドキュメントを参照してください。
次の小道具をアニメーションコンポーネントに渡して、動作をカスタマイズできます。
| 小道具 | 説明 | 値 | デフォルト |
|---|---|---|---|
cascade | 設定されている場合、公開アニメーションの各子は、前任者（子どもiミリ秒i * delay * damping後にビューポートに入る）を考慮した遅延を自動的に割り当てられます。 | trueまたはfalse | false |
damping | カスケードアニメーション内の各アニメーションコンポーネントが割り当てられる遅延に影響する要因。 damping = 1場合、遅延はアニメーション期間に等しくなります。 damping < 1場合、遅延はアニメーション期間よりも低くなります。 damping > 1超えると、遅延はアニメーション期間より大きくなります。 | number | 0.5 （遅延がアニメーション期間の半分になることを意味します） |
direction | アニメーションの起源（該当する場合）。 | 通常、 "down" 、 "left" 、 "right"または"up"で、いくつかの例外がコードに文書化されています | undefined |
delay | アニメーションが始まるまで（ミリ秒単位で）待つ時間。 | number | 0 |
duration | アニメーション期間（ミリ秒）。 | number | 1000 |
fraction | アニメーションがトリガーされる前に、どのくらいの要素が表示されるべきか。 | 0 1 number | 0 |
triggerOnce | アニメーションが1回のみ実行されるかどうかを指定します。要素がビューポートに入る/終了/再入力するたびに実行する必要があります。 | trueまたはfalse | false |
className | コンテナ要素に追加するクラス名。 | string | undefined |
style | コンテナ要素に追加するインラインスタイル。 | React.CSSProperties | undefined |
childClassName | 子要素に追加するクラス名。 | string | undefined |
childStyle | 子要素に追加するインラインスタイル。 | React.CSSProperties | undefined |
onVisibilityChange | 要素がViewPortに入るか、離れるときにコールバックが実行されました。複数の要素がアニメーション化されている場合、この関数は各要素で呼び出されます。 | (inView: boolean, entry: IntersectionObserverEntry) => void | undefined |
要素がビューポートに初めて入るときだけアニメーションをトリガーするには：
< Slide triggerOnce >
< p > I will animate only the first time you see me </ p >
</ Slide >複数のアニメーションを一緒にチェーンするには、 cascade小道具をtrueに設定します。
< Fade cascade >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > damping小道具で遊んで、各子供が徐々に現れる遅延を変更します。
< Fade cascade damping = { 0.1 } >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > バージョン3.2.0から始めて、カスタムアニメーションを定義できます！ Revealコンポーネントをインポートするだけ（ライブラリのデフォルトエクスポートであり、必要な名前を付けます）、 keyframesプロップを渡します。
import React from "react" ;
import Reveal from "react-awesome-reveal" ;
import { keyframes } from "@emotion/react" ;
const customAnimation = keyframes `
from {
opacity: 0;
transform: translate3d(-200px, -100px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
` ;
function CustomAnimation ( { children } ) {
return < Reveal keyframes = { customAnimation } > { children } </ Reveal > ;
} keyframes小道具が渡されない場合、デフォルトのレンダリングされたアニメーションは、左からのフェージングの入り口です（ <Fade direction="left">...</Fade> ）。
これらの小道具を渡してRevealにすることもできます。
cascadedampingdelaydurationfractiontriggerOnceclassNameとchildClassNamestyleとchildStyleonVisibilityChange交差点オブザーバーは、要素がビューポート内にあるかどうかを判断するために使用されるAPIです。ブラウザのサポートは非常に優れています。Safariが12.1にサポートを追加することで、すべての主要なブラウザーがネイティブに交差点オブザーバーをサポートするようになりました。
古いブラウザをサポートする必要がある場合は、交差点オブザーバーAPIのポリフィルを追加します。
ポリフィルを直接追加するか、polyfill.ioのようなサービスを使用して必要に応じて追加できます。
yarn add intersection-observer次に、アプリにインポートします。
import "intersection-observer" ;Webpack（または類似）を使用している場合は、動的インポートを使用して、必要に応じてポリフィルをロードできます。基本的な実装は次のようになります：
/**
* Do feature detection, to figure out which polyfills needs to be imported.
**/
async function loadPolyfills ( ) {
if ( typeof window . IntersectionObserver === "undefined" ) {
await import ( "intersection-observer" ) ;
}
} 以前のバージョンのドキュメントを表示するには、GitHubのプロジェクトリポジトリの過去のタグをナビゲートし、その特定のバージョンのREADMEをお読みください。
プロジェクトソースコードは、MITライセンスに基づいてライセンスされています。このリポジトリを自由にフォークし、コードを編集し、共有し、非営利目的と商業目的で使用できます。
