팁
이 도서관이 마음에 들면 제작자를 지원하는 것을 고려하십시오.
React Awesome 공개는 TypeScript로 작성된 React 앱을위한 라이브러리입니다.이 뷰 포트에 요소가 나타날 때를 감지하기 위해 교차로 관찰자 API를 사용하여 공개 애니메이션을 추가합니다. 애니메이션은 감정에 의해 내부적으로 제공되며 하드웨어 가속의 이점을 얻기 위해 CSS 애니메이션으로 구현됩니다.
이 패키지를 앱의 종속성으로 추가하려면 간단히 실행하십시오.
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” "pulse" , "rubberBand" , “shake” , “shakeX" , "shakeY” , "swing” , "tada" 및 “wobble” 입니다.
다시 한 번 세부 사항은 animate.css 문서를 참조하십시오.
다음 소품을 애니메이션 구성 요소로 전달하여 동작을 사용자 정의 할 수 있습니다.
| 소품 | 설명 | 값 | 기본 |
|---|---|---|---|
cascade | 설정된 경우, 공개 애니메이션의 각 자식은 자동으로 전임자를 고려하여 지연을 할당합니다 (어린이 i Milliseconds를 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 | 애니메이션이 트리거되기 전에 Viewport에 요소가 얼마나 있어야 하는가. | 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 소품을 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을 직접 추가하거나 Polyfill.io와 같은 서비스를 사용하여 필요할 때 추가 할 수 있습니다.
yarn add intersection-observer그런 다음 앱에서 가져 오십시오.
import "intersection-observer" ;웹 팩 (또는 이와 유사한)을 사용하는 경우 동적 가져 오기를 사용하여 필요한 경우에만 폴리 필을로드 할 수 있습니다. 기본 구현은 다음과 같이 보일 수 있습니다.
/**
* 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 라이센스에 따라 라이센스가 부여됩니다. 이 저장소를 자유롭게 포크하고, 코드를 편집하고, 비상업적 및 상업적 목적으로 공유하고 사용할 수 있습니다.
