Кончик
Если вам нравится эта библиотека, пожалуйста, рассмотрите возможность поддержать ее создателя.
React Awesome Spece - это библиотека для приложений React, написанных в TypeScript, которая добавляет, что выявляет анимации, используя 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 | В случае установки каждому ребенку Animation автоматически присваивается задержка, которая учитывает их предшественника (ребенок 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 | Насколько элемент должен быть в Viewport до того, как анимация будет вызвана. | number от 0 до 1 | 0 |
triggerOnce | Определяет, должна ли анимация запускать только один раз или каждый раз, когда элемент входит/выходит/возвращает/повторно входит в порт View. | 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 API Observer.
Вы можете добавить полифилл напрямую или использовать такую услугу, как 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. Вы можете свободно разыграть этот репозиторий, редактировать код, делиться и использовать его как для некоммерческих, так и для коммерческих целей.
