react component transition

transisi reaksi-komponen

Komponen React yang mudah digunakan untuk menerapkan animasi antara transisi komponen, dengan menggunakan Web Animations API .

Demo

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

Memasang

 npm install react-component-transition --save

Naskah

Jenis termasuk dalam paket.

Sasaran

Tujuan utamanya adalah untuk memberikan cara yang mudah dan cepat untuk menerapkan animasi sederhana saat beralih dari satu komponen ke komponen lain - tanpa kehilangan terlalu banyak waktu pengujian, penyesuaian, penataan, dll ... hanya dalam beberapa baris, mungkin untuk membuat halaman bereaksi apa pun jauh lebih interaktif dan ramah pengguna.

Polyfills

Bergantung pada browser untuk mendukung, beberapa polyfill mungkin diperlukan:

• API Animasi Web
• API Pengamat Persimpangan (hanya jika prop lazy diatur ke true )
• Janji

Penggunaan

ComponentTransition

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

    // ...

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

Preset

Preset adalah komponen yang memiliki enterAnimation dan exitAnimation sudah ditetapkan, untuk penggunaan yang lebih mudah dan lebih bersih.

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

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

Ada preset yang tersedia untuk setiap AnimationTypes .

ComponentTransitionList

Untuk digunakan dengan daftar. Cukup kembalikan ComponentTransition atau preset apa pun dalam fungsi map Anda dan bungkus semuanya dengan 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 >
    ) ;
} ;

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

Animasi khusus

 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 adalah seperangkat animasi yang sudah didefinisikan yang dapat digunakan dalam enterAnimation dan/atau alat peraga exitAnimation . Yang tersedia:

 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)

Untuk setiap jenis AnimationTypes ada preset masing -masing.

alat peraga

Semua preset dan ComponentTransition akan membungkus children mereka dalam elemen div . div ini adalah elemen yang akan menghidupkan ketika children tidak menghubungkan atau memasang (dirujuk di sini sebagai "wadah").

Nama	Jenis	Bawaan	Keterangan
AnimateContainer	Boolean	false	Jika true wadah juga akan menghidupkan dari ukuran komponen keluar ke ukuran komponen enter Catatan: Semua preset memiliki prop ini diatur ke true secara default
animateContainerduration	nomor	300	Durasi dalam milidetik animasi wadah
animateContainereasing	rangkaian	"kemudahan"	Pelonggaran animasi wadah
AnimateOnmount	Boolean	false	Jika true , berlaku enterAnimation saat komponen dipasang di render awal
ClassName	rangkaian	undefined	Kelas CSS untuk mengatur elemen kontainer
ClassNameenter	rangkaian	undefined	Kelas CSS untuk mengatur elemen kontainer selama enterAnimation
ClassNeTeExit	rangkaian	undefined	Kelas CSS untuk mengatur elemen kontainer selama exitAnimation
dengan disabilitas	Boolean	false	Nonaktifkan semua animasi
enteranimation	Animationsettings | Animationsettings []	undefined	Parameter API Animasi Web untuk diterapkan saat komponen baru dipasang
Exitanimation	Animationsettings | Animationsettings []	undefined	Parameter API Animasi Web yang akan diterapkan saat komponen saat ini akan membuka jalan
malas	Boolean	false	Akan menerapkan enterAnimation dan exitAnimation jika komponen terlihat di viewport dengan menggunakan API pengamat persimpangan. Jika elemen wadah true akan selalu ada di DOM
LazyOptions	IntersectionOptions	undefined	Opsi persimpangan pengamat
Onenterfinished	() => batal	undefined	Panggilan balik saat enterAnimation selesai
Onexitfinished	() => batal	undefined	Panggilan balik saat exitAnimation
gaya	React.cssproperties	undefined	Gaya inline untuk disetel di elemen wadah

Contoh

Klone repo terlebih dahulu dan kemudian:

 npm install
npm start