react awesome reveal下載 - react awesome reveal源代碼下載

react awesome reveal

網站數據

[email protected]

下載

反應很棒的揭示

提示

如果您喜歡這個庫，請考慮支持其創建者。

React Awesome揭示是一個用打字稿編寫的React應用程序的庫，該庫使用交叉點觀察者API添加了揭示動畫，以檢測元素何時出現在視口中。動畫是由情感內部提供的，並作為CSS動畫實現，以受益於硬件加速。

特徵

？現代堆棧- 它是為現代反應而建造的，並支持React 18
？打字稿支持- 用打字稿編寫以改進DX
？輕量級- 您的項目的足跡很少
使用本機API - 交叉點觀察者和CSS動畫現在得到所有瀏覽器的支持
快速- 由於使用本地異步API和硬件加速度，黃油良好的經驗
？完全自定義- 定義自定義動畫，讓庫渲染它們
SSR支持- 服務器端渲染在開箱即用
？可搖晃的樹木- 只有您使用的零件才會包含在您的最終捆綁包中

安裝

要添加此軟件包作為您應用程序的依賴性，只需運行

npm install react-awesome-reveal @emotion/react --save

或者，如果您使用的是紗線：

yarn add react-awesome-reveal @emotion/react

或者，如果您正在使用PNPM（我強烈建議）：

pnpm add react-awesome-reveal @emotion/react

快速開始

來自React Awesome的導入效果向您的React組件顯示，例如Fade效果：

 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” ， "rubberBand" ， "pulse" ”， “shake” ， “shakeX" ， “ shakex” ，“ shakey”，“ shakey”，“ swing "shakeY” ， "swing” ， "tada"和“wobble” 。

同樣，有關詳細信息，請參閱Animate.css文檔。

道具

您可以將以下道具傳遞給動畫組件以自定義行為：

支柱	描述	值	預設
`cascade`	如果設置，則揭示動畫的每個孩子會自動分配一個延遲，以考慮其前身（孩子`i` `i * delay * damping` milliseconds之後進入視口） - 對列表項目的動畫非常有用。	`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`	指定動畫是否應一次或每次運行一次，或者每次都會進入/退出/重新輸入視口。	`true`還是`false`	`false`
`className`	添加到容器元素的類名稱。	`string`	`undefined`
`style`	內聯樣式添加到容器元素中。	`React.CSSProperties`	`undefined`
`childClassName`	班級名稱要添加到子元素中。	`string`	`undefined`
`childStyle`	內聯樣式添加到子元素中。	`React.CSSProperties`	`undefined`
`onVisibilityChange`	當元素輸入或離開視口時執行回調。如果要動畫一個以上的元素，則在每個元素上調用此功能。	`(inView: boolean, entry: IntersectionObserverEntry) => void`	`undefined`

例子

為了觸發動畫，只有第一次進入視口：

 < Slide triggerOnce >
  < p > I will animate only the first time you see me </ p >
</ Slide >

鏈接多個動畫

要將多個動畫鏈在一起，請將cascade Prop設置為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 ：

cascade
damping
delay
duration
fraction
triggerOnce
className和childClassName
style和childStyle
onVisibilityChange

交叉觀察者

相交觀察者是用於確定視口內部元素是否在視口內的API。瀏覽器支持確實很好 - 隨著Safari在12.1中增加了支持，所有主要瀏覽器現在都在本地支持交叉點觀察者。

如果您需要支持舊瀏覽器，請添加與交叉點觀察者API的多填充。

多填充

您可以直接添加polyfill或使用polyfill.io之類的服務在需要時添加它。

yarn add intersection-observer

然後將其導入您的應用程序：

 import "intersection-observer" ;

如果您使用的是WebPack（或類似），則可以使用動態導入量僅在需要時加載polyfill。基本實施可能看起來像這樣：

 /**
 * Do feature detection, to figure out which polyfills needs to be imported.
 **/
async function loadPolyfills ( ) {
  if ( typeof window . IntersectionObserver === "undefined" ) {
    await import ( "intersection-observer" ) ;
  }
}