react component transition

React-Komponentenübergang

Einfach zu verwendende React -Komponente, um Animationen zwischen den Komponentenübergängen mithilfe von Webanimations -API anzuwenden.

Demo

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

Installieren

 npm install react-component-transition --save

Typoskript

Typen sind im Paket enthalten.

Ziel

Das Hauptziel ist es, eine einfache und schnelle Möglichkeit zu bieten, einfache Animationen beim Übergang von einer Komponente in eine andere anzuwenden - ohne zu viel Zeit zu testen, anzupassen, zu stylen usw. In nur wenigen Zeilen ist es möglich, eine react -Seite viel interaktiver und benutzerfreundlicher zu gestalten.

Polyfills

Abhängig vom Browser, um zu stützen, sind möglicherweise einige Polyfills erforderlich:

• Webanimationen API
• Kreuzung Observer API (nur wenn lazy Prop auf true festgelegt)
• Versprechen

Verwendung

Komponenttransition

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

    // ...

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

Voreinstellungen

Voreinstellungen sind Komponenten, die enterAnimation und exitAnimation bereits für einen einfacheren und saubereren Gebrauch einstellen.

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

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

Für jede AnimationTypes gibt es eine Voreinstellung.

ComponentTransitionList

Mit Listen verwendet werden. Geben Sie einfach eine ComponentTransition oder eine voreingestellte Voreinstellung in Ihrer map zurück und wickeln Sie alles mit einer ComponentTransitionList ein.

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

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

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

Benutzerdefinierte Animation

 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

AnimationType

AnimationTypes sind bereits definierte Animationen, die in enterAnimation und/oder exitAnimation -Requisiten verwendet werden können. Verfügende sind:

 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)

Für jede Art von AnimationTypes gibt es ein jees Voreinstellung.

Requisiten

Alle Voreinstellungen und die ComponentTransition werden ihre children in ein div einwickeln. Dieses div ist das Element, das sich animieren wird, wenn children nicht tätig oder montieren (es wird hier als "Container" bezeichnet).

Name	Typ	Standard	Beschreibung
AnimateContainer	boolean	false	true der Container auch von der Größe der Exit -Komponenten zur Eingabetuchgröße animiert wird HINWEIS: Alle Voreinstellungen haben diese Requisite standardmäßig auf true festgelegt
AnimateContainerDuration	Nummer	300	Dauer in Millisekunden der Containeranimation
AnimateContainereases	Saite	"Leichtigkeit"	Lockerung der Containeranimation
Animateonmount	boolean	false	Wenn true , wendet enterAnimation an, wenn die Komponenten im ersten Render montiert werden
Klassenname	Saite	undefined	CSS -Klasse, die im Containerelement festgelegt werden soll
KlassennameEenter	Saite	undefined	CSS -Klasse, die während enterAnimation im Containerelement eingestellt werden soll
ClassNameExit	Saite	undefined	CSS -Klasse, die während exitAnimation im Containerelement eingestellt werden soll
deaktiviert	boolean	false	Deaktivieren Sie alle Animationen
Enteranimation	Animationenettings | Animationenettings []	undefined	Webanimationen -API -Parameter, die angewendet werden sollen, wenn neue Komponenten montiert werden
Exitanimation	Animationenettings | Animationenettings []	undefined	Webanimationen -API -Parameter, die angewendet werden sollen, wenn die aktuelle Komponente unmontiert wird
faul	boolean	false	Wendet enterAnimation und exitAnimation an, wenn die Komponente im Ansichtsfenster mithilfe der Schnittstelle der Beobachter API sichtbar ist. Wenn true Containerelement immer im DOM ist
Faulpelz	Schnittpunkte	undefined	Intersection Observer -Optionen
aufgeräumt	() => void	undefined	Rückruf nach Abschluss enterAnimation
Onexitfineed	() => void	undefined	Rückruf, wenn exitAnimation endet
Stil	React.csSproperties	undefined	Inline -Stile im Containerelement einstellen

Beispiele

Klonen Sie zuerst das Repo und dann:

 npm install
npm start