Dica
Se você gosta desta biblioteca, considere apoiar seu criador.
O React Awesome Reveal é uma biblioteca para aplicativos React escritos no TypeScript que adiciona animações de revelação usando a API de interseção do Observador para detectar quando os elementos aparecem na viewport. As animações são fornecidas internamente por emoção e implementadas como animações CSS para se beneficiar da aceleração de hardware.
Para adicionar este pacote como uma dependência ao seu aplicativo, basta executar
npm install react-awesome-reveal @emotion/react --saveOu, se você estiver usando o fio:
yarn add react-awesome-reveal @emotion/reactOu, se você estiver usando o PNPM (como eu sugiro fortemente):
pnpm add react-awesome-reveal @emotion/react Importar efeitos do React Awesome Reveal ao seu componente React, por exemplo, o efeito Fade :
import { Fade } from "react-awesome-reveal" ;Em seguida, basta embrulhar os componentes que você deseja animar:
< Fade >
< p > I will gently appear as I enter the viewport </ p >
</ Fade > Os efeitos atualmente suportados são Bounce , Fade , Flip , Hinge , JackInTheBox , Roll , Rotate , Slide e Zoom . Consulte a documentação do Animate.CSS para os detalhes.
Desde a versão 3, as animações de buscador de atenção são envolvidas pelo componente AttentionSeeker , que aceita um suporte chamado effect que especifica a animação para renderizar (os padrões de "bounce” ). Os efeitos suportados são: ”bounce" , "flash" , "headShake” , " "heartBeat" "jello” ", "pulse" , "rubberBand" , " “shake” , “shakeX" , "shakeY” , "swing” , "tada" e “wobble” .
Novamente, consulte a documentação do Animate.CSS para obter os detalhes.
Você pode passar os seguintes adereços para os componentes de animação para personalizar o comportamento:
| Prop | Descrição | Valores | Padrão |
|---|---|---|---|
cascade | Se definido, cada criança de uma animação de revelação recebe automaticamente um atraso que leva em consideração o seu antecessor (criança i entro na viewport após i * delay * damping de milissegundos) - útil para animar os itens da lista. | true ou false | false |
damping | Fator que afeta o atraso que cada componente animado em uma animação em cascata será atribuído. Se damping = 1 , o atraso será igual à duração da animação; Se damping < 1 , o atraso será menor que a duração da animação; Se damping > 1 , o atraso será maior que a duração da animação. | number | 0.5 (o que significa que o atraso será metade da duração da animação) |
direction | Origem da animação (quando aplicável). | Geralmente "down" , "left" , "right" ou "up" , com algumas exceções documentadas no código | undefined |
delay | Hora de esperar antes do início da animação (em milissegundos). | number | 0 |
duration | A duração da animação (milissegundos). | number | 1000 |
fraction | Quanto um elemento deve estar na viewport antes que a animação seja acionada. | number entre 0 e 1 | 0 |
triggerOnce | Especifica se a animação deve ser executada apenas uma vez ou sempre que um elemento entra/sai/reentiva a viewport. | true ou false | false |
className | Os nomes da classe a serem adicionados ao elemento do contêiner. | string | undefined |
style | Os estilos embutidos para adicionar ao elemento do contêiner. | React.CSSProperties | undefined |
childClassName | Os nomes da classe a serem adicionados ao elemento filho. | string | undefined |
childStyle | Os estilos embutidos para adicionar ao elemento filho. | React.CSSProperties | undefined |
onVisibilityChange | O retorno de chamada executado quando o elemento entra ou sai da visualização. Se mais de um elemento estiver sendo animado, essa função será chamada em cada elemento. | (inView: boolean, entry: IntersectionObserverEntry) => void | undefined |
Para acionar a animação apenas na primeira vez que um elemento entra na viewport:
< Slide triggerOnce >
< p > I will animate only the first time you see me </ p >
</ Slide > Para encadear várias animações, defina o suporte cascade como true :
< Fade cascade >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > Brinque com o suporte damping para alterar o atraso pelo qual cada criança aparecerá progressivamente:
< Fade cascade damping = { 0.1 } >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > A partir da versão 3.2.0, você pode definir animações personalizadas! Simplesmente importe o componente Reveal (que é a exportação padrão da biblioteca - dê o nome que você deseja) e passe um suporte 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 > ;
} Se nenhum suporte keyframes for aprovado, a animação renderizada padrão será uma entrada desbotada da esquerda (equivalente a <Fade direction="left">...</Fade> ).
Você também pode passar esses adereços para Reveal :
cascadedampingdelaydurationfractiontriggerOnceclassName e childClassNamestyle e childStyleonVisibilityChangeO observador de interseção é a API usada para determinar se um elemento está dentro da viewport ou não. O suporte ao navegador é muito bom - com o Safari adicionando suporte em 12.1, todos os principais navegadores agora suportam observadores de interseção nativamente.
Se você precisar suportar navegadores antigos, adicione o poli -preenchimento para a API do observador de interseção.
Você pode adicionar o Polyfill diretamente ou usar um serviço como o Polyfill.io para adicioná -lo quando necessário.
yarn add intersection-observerEm seguida, importe -o em seu aplicativo:
import "intersection-observer" ;Se você estiver usando o WebPack (ou similar), poderá usar importações dinâmicas para carregar o poli -fil apenas, se necessário. Uma implementação básica pode parecer algo assim:
/**
* Do feature detection, to figure out which polyfills needs to be imported.
**/
async function loadPolyfills ( ) {
if ( typeof window . IntersectionObserver === "undefined" ) {
await import ( "intersection-observer" ) ;
}
} Para ver a documentação para versões anteriores, navegue por tags anteriores no repositório do projeto do Github e leia o ReadMe para essa versão específica.
O código -fonte do projeto está licenciado sob a licença do MIT. Você é livre para gastar este repositório, editar o código, compartilhar e usá-lo para fins não comerciais e comerciais.
