react component transition
Presets duration & deps update
El componente React fácil de usar para aplicar animaciones entre transiciones de componentes, utilizando la API de animaciones web .
https://dgpedro.github.io/react-component-transition/
npm install react-component-transition --save
Los tipos se incluyen en el paquete.
El objetivo principal es proporcionar una forma fácil y rápida de aplicar animaciones simples al hacer la transición de un componente a otro, sin perder demasiado tiempo de prueba, ajuste, estilo, etc. ... En solo un par de líneas es posible hacer que cualquier página de reacción sea mucho más interactiva y fácil de usar.
Dependiendo del navegador para soportar, pueden ser necesarios algunos polyfills:
lazy se establece en true ) import { ComponentTransition , AnimationTypes } from "react-component-transition" ;
const Component = ( ) => {
// ...
return (
< ComponentTransition
enterAnimation = { AnimationTypes . scale . enter }
exitAnimation = { AnimationTypes . fade . exit }
>
{ showDetails ? < Details /> : < Summary /> }
</ ComponentTransition >
) ;
} ; Los preajustes son componentes que ya tienen enterAnimation y exitAnimation , para un uso más fácil y limpio.
import { Presets } from "react-component-transition" ;
const Component = ( ) => {
// ...
return (
< Presets . TransitionFade >
{ show && < Details /> }
</ Presets . TransitionFade >
) ;
} ; Hay un preajuste disponible para cada AnimationTypes .
Para ser utilizado con listas. Simplemente devuelva una ComponentTransition o cualquier preajuste en su función map y envuélvala todo con una 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 >
) ;
} ; 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 >
) ; 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 >
) ;
} ; AnimationTypes son un conjunto de animaciones ya definidas que pueden usarse en los accesorios enterAnimation y/o exitAnimation . Los disponibles son:
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 hay un preajuste respectivo.
Todos los preajustes y la ComponentTransition envolverán a sus children en un elemento div . Este div es el elemento que animará cuando children se desmonten o se monten (se hace referencia aquí como "contenedor").
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| animatecontainer | booleano | false | Si true el contenedor también animará desde el tamaño del componente de salida al tamaño del componente EnterNOTA: Todos los presets tienen este accesorio establecido en true de forma predeterminada |
| AnimateContainerDuration | número | 300 | Duración en milisegundos de la animación del contenedor |
| AnimateContainereing | cadena | "facilidad" | Alivio de la animación de contenedores |
| animateonmount | booleano | false | Si true , aplica enterAnimation cuando se monta el componente en el render inicial |
| nombre de clase | cadena | undefined | Clase CSS para establecer en el elemento contenedor |
| ClassNameEnder | cadena | undefined | Clase CSS para establecer en el elemento contenedor durante enterAnimation |
| classameExit | cadena | undefined | Clase CSS para establecer en el elemento contenedor durante exitAnimation |
| desactivado | booleano | false | Deshabilitar todas las animaciones |
| enteranimación | Animationsettings | Animationsettings [] | undefined | Animaciones web Los parámetros de la API se aplicarán cuando se monta el nuevo componente |
| exitanimación | Animationsettings | Animationsettings [] | undefined | Parámetros de la API de animaciones web que se aplicarán cuando el componente actual se desmontará |
| perezoso | booleano | false | Aplicará enterAnimation y exitAnimation si el componente es visible en la ventana gráfica utilizando la API del observador de intersección. Si el elemento de contenedor true siempre estará en el DOM |
| perezoso | IntersectionOptions | undefined | Opciones de observador de intersección |
| onenterfinished | () => nulo | undefined | Devolución de llamada cuando termina enterAnimation |
| enfinado | () => nulo | undefined | Devolución de llamada cuando termina exitAnimation |
| estilo | React.cssproperties | undefined | Estilos en línea para colocar en el elemento contenedor |
Clone el repositorio primero y luego:
npm install
npm start
