react component transition

transition react-component

Facile à utiliser React Composant pour appliquer des animations entre les transitions des composants, en utilisant l'API des animations Web .

Démo

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

Installer

 npm install react-component-transition --save

Manuscrit

Les types sont inclus dans le package.

But

L'objectif principal est de fournir un moyen facile et rapide d'appliquer des animations simples lors de la transition d'un composant à un autre - sans perdre trop de temps à tester, à régler, à style, etc ... Dans quelques lignes, il est possible de rendre une page de réaction beaucoup plus interactive et conviviale.

Polyfillages

Selon le navigateur à soutenir, certains polyfills pourraient être nécessaires:

• API d'animations Web
• API de l'observateur d'intersection (seulement si un accessoire lazy set sur true )
• Promesse

Usage

ComponentTransition

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

    // ...

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

Préréglages

Les préréglages sont des composants dont enterAnimation et exitAnimation sont déjà définies, pour une utilisation plus facile et plus propre.

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

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

Il y a un préréglage disponible pour chaque AnimationTypes .

ComponentTransitionList

À utiliser avec des listes. Renvoyez simplement un ComponentTransition ou tout préréglage dans votre fonction map et enveloppez tout avec un 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 >
    ) ;
} ;

Avec 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 >
) ;

Animation personnalisée

 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 est un ensemble d'animations déjà définies qui peuvent être utilisées dans les accessoires enterAnimation et / ou exitAnimation . Les disponibles sont:

 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)

Pour chaque type de AnimationTypes il y a un préréglage respectif.

accessoires

Tous les préréglages et la ComponentTransition envelopperont leurs children dans un élément div . Cette div est l'élément qui animera lorsque children sont mal en train ou montant (il est référencé ici comme "conteneur").

Nom	Taper	Défaut	Description
animatentainer	booléen	false	Si true le conteneur s'animera également de la taille du composant de sortie à la taille de la composante Entrée Remarque: Tous les préréglages ont cette accessoire définie sur true par défaut
AnimateContainerDuration	nombre	300	Durée en millisecondes de l'animation de conteneur
AnimateContainer	chaîne	"facilité"	Assouplissement de l'animation du conteneur
animeronmount	booléen	false	Si true , applique enterAnimation lorsque le composant monte dans le rendu initial
nom de classe	chaîne	undefined	Classe CSS pour définir l'élément de conteneur
ClassNameenter	chaîne	undefined	Classe CSS à définir dans l'élément de conteneur pendant enterAnimation
classNameExit	chaîne	undefined	Classe CSS à définir dans l'élément de conteneur pendant exitAnimation
désactivé	booléen	false	Désactiver toutes les animations
enteranimation	Animations. Animations.	undefined	Les paramètres de l'API d'animations Web à appliquer lorsque de nouveaux composants montent
exitanimation	Animations. Animations.	undefined	Les paramètres de l'API d'animations Web à appliquer lorsque le composant actuel démêlera
paresseux	booléen	false	Appliquera enterAnimation et exitAnimation si le composant est visible dans la fenêtre en utilisant l'API de l'observateur d'intersection. Si true élément de conteneur sera toujours dans le DOM
Lazyoptions	Intersection option	undefined	Options d'observateurs d'intersection
infini	() => void	undefined	Rappel lorsque enterAnimation se termine
onexitfinis	() => void	undefined	Rappel lorsque exitAnimation se termine
style	React.cssproperties	undefined	Styles en ligne à définir dans l'élément de conteneur

Exemples

Clone le repo d'abord et puis:

 npm install
npm start