react component transition

React-componente-transição

Componente React fácil de usar para aplicar animações entre transições de componentes, usando a API de animações da Web .

Demonstração

https://dgpedro.github.io/react-component-transition/

Instalar

 npm install react-component-transition --save

TypeScript

Os tipos estão incluídos no pacote.

Meta

O principal objetivo é fornecer uma maneira fácil e rápida de aplicar animações simples ao fazer a transição de um componente para outro - sem perder muito tempo testando, ajustando, modelando, etc ... Em apenas algumas linhas, é possível tornar qualquer página do React muito mais interativa e amigável.

Polyfills

Dependendo do navegador para apoiar, podem ser necessários alguns poli -preenchimentos:

• API de animações da web
• API do observador de interseção (apenas se lazy suporte definido como true )
• Promessa

Uso

Componentetransição

 import { ComponentTransition , AnimationTypes } from "react-component-transition" ;
const Component = ( ) => {

    // ...

    return (
        < ComponentTransition
            enterAnimation = { AnimationTypes . scale . enter }
            exitAnimation = { AnimationTypes . fade . exit }
        >
            { showDetails ? < Details /> : < Summary /> }
        </ ComponentTransition >
    ) ;
} ;

Predefinições

As predefinições são componentes que já possuem enterAnimation e exitAnimation , para um uso mais fácil e limpo.

 import { Presets } from "react-component-transition" ;
const Component = ( ) => {
    
    // ...

    return (
        < Presets . TransitionFade >
            { show && < Details /> }
        </ Presets . TransitionFade >
    ) ;
} ;

Há uma predefinição disponível para cada AnimationTypes .

ComponentTransitionList

Para ser usado com listas. Basta retornar uma ComponentTransition ou qualquer predefinição na sua função map e envolvê -la com uma ComponentTransitionList .

 import { ComponentTransitionList , Presets } from "react-component-transition" ;
const Component = ( ) => {
    
    // ...

    return (
        < ComponentTransitionList >
            { list . map ( ( listItem , index ) =>
                < Presets . TransitionScale key = { index } >
                    < ListItem { ... listItem } />
                </ Presets . TransitionScale >
            ) }
        </ ComponentTransitionList >
    ) ;
} ;

Com react-router

 import { useLocation } from "react-router-dom" ;
const AppRoutes = ( ) => {
    const location = useLocation ( ) ;
    return (
        < ComponentTransition
            enterAnimation = { AnimationTypes . slideUp . enter }
            exitAnimation = { AnimationTypes . slideDown . exit }
        >
            < Switch key = { location . key } location = { location } >
                < Route . . . / >
                < Route . . . / >
                < Route . . . / >
            </ Switch >
        </ ComponentTransition >
    );
} ; 

 import { BrowserRouter } from "react-router-dom" ;
const App = ( ) => (
    < BrowserRouter >
        < AppRoutes />
    </ BrowserRouter >
) ;

Animação personalizada

 import { ComponentTransition , AnimationTypes } from "react-component-transition" ;
const Component = ( ) => {

    // ...

    return (
        < ComponentTransition
            enterAnimation = { [
                AnimationTypes . slideUp . enter ,
                AnimationTypes . fade . enter ,
            ] }
            exitAnimation = { [ {
                keyframes : [
                    { transform : "translate3d(0,0,0)" } ,
                    { transform : "translate3d(0,50%,0)" } ,
                    { transform : "translate3d(0,80%,0)" } ,
                    { transform : "translate3d(0,90%,0)" } ,
                    { transform : "translate3d(0,100%,0)" } ,
                ] ,
                options : {
                    duration : 500 ,
                    easing : "cubic-bezier(0.83, 0, 0.17, 1)" ,
                }
            } ,
            {
                keyframes : [
                    { opacity : 1 } ,
                    { opacity : 0.3 } ,
                    { opacity : 0.1 } ,
                    { opacity : 0 } ,
                ] ,
                options : {
                    duration : 300 ,
                }
            } ]
            }
        >
            < Details key = { selectedTab } />
        </ ComponentTransition >
    ) ;
} ; 

API

AnimationTypes

AnimationTypes é um conjunto de animações já definidas que podem ser usadas nos adereços enterAnimation e/ou exitAnimation . Os disponíveis são:

 collapse.(horizontal|vertical)
expand.(horizontal|vertical)
fade.(enter|exit)
rotate.(enter|exit)
rotateX.(enter|exit)
rotateY.(enter|exit)
scale.(enter|exit)
slideDown.(enter|exit)
slideLeft.(enter|exit)
slideRight.(enter|exit)
slideUp.(enter|exit)

Para cada tipo de Types de AnimationTypes , há uma predefinição respectiva.

adereços

Todas as predefinições e a ComponentTransition envolverão seus children em um elemento div . Esta div é o elemento que animará quando children estão sem montar ou montar (é referenciada aqui como "contêiner").

Nome	Tipo	Padrão	Descrição
animatecontainer	booleano	false	Se true o contêiner também irá animar do tamanho do componente de saída até o tamanho do componente Enter NOTA: Todas as predefinições têm este suporte definido como true por padrão
AnimateContainerDuration	número	300	Duração em milissegundos da animação de contêineres
AnimateContainearing	corda	"facilidade"	Facilitando a animação de contêineres
AnimateOnmount	booleano	false	Se true , aplica enterAnimation quando o componente é montado na renderização inicial
ClassName	corda	undefined	Classe CSS para definir no elemento de contêiner
ClassNameEnter	corda	undefined	Classe CSS para definir no elemento de contêiner durante enterAnimation
ClassNameExit	corda	undefined	Classe CSS para definir no elemento de contêiner durante exitAnimation
desabilitado	booleano	false	Desative todas as animações
enteranimação	Animationsettings | Animationsettings []	undefined	Parâmetros da API de animações da Web a serem aplicadas quando novos componentes montagens
Exitanimação	Animationsettings | Animationsettings []	undefined	Parâmetros da API de animações da web a serem aplicadas quando o componente atual desmontará
preguiçoso	booleano	false	Aplicará enterAnimation e exitAnimation se o componente estiver visível na viewport usando a API de interseção do Observador. Se o elemento true de contêiner estará sempre no DOM
Lazyoptions	Opções de interseção	undefined	Opções de observador de interseção
Onenerfinished	() => vazio	undefined	Retorno de chamada quando enterAnimation terminar
Onexitfinished	() => vazio	undefined	Retorno de chamada quando exitAnimation termina
estilo	React.cssproperties	undefined	Estilos embutidos para definir no elemento de contêiner

Exemplos

Clone o repo primeiro e depois:

 npm install
npm start