react component transition

反應組分轉換

易於使用的React組件通過使用Web Animations API在組件過渡之間應用動畫。

演示

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

安裝

 npm install react-component-transition --save

打字稿

包裝中包含類型。

目標

主要目標是在從一個組件過渡到另一個組件時提供一種簡單快速的方法來應用簡單的動畫 - 而不會失去太多的時間測試，調整，樣式等...在僅幾行，就可以使任何React頁面更加互動和用戶友好。

多填充

根據瀏覽器的支持，可能需要一些多填充：

• Web動畫API
• 交叉點觀察者API （僅當lazy道具設置為true ）
• 承諾

用法

組成部分

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

    // ...

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

預設

預設是已經設置了enterAnimation和exitAnimation的組件，可以更輕鬆，更清潔。

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

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

每個AnimationTypes都有一個預設。

ComponentTransitionList

與列表一起使用。只需返回map功能中的ComponentTransition或任何預設，然後將其全部包裝在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 >
    ) ;
} ; 

API

動畫類型

AnimationTypes是已經定義的一組動畫，可用於enterAnimation和/或exitAnimation Props。可用的是：

 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)

對於每種類型的AnimationTypes ，都有相應的預設。

道具

所有預設和ComponentTransition將把children包裹在div元素中。該div是當children卸載或安裝時將動畫的元素（在這裡被稱為“容器”）。

姓名	類型	預設	描述
AnimateContainer	布爾	false	如果是true則容器還將從退出組件大小到Enter組件大小動畫 注意：默認情況下，所有預設均設置為true
AnimateContainerDuration	數字	300	集裝箱動畫的毫秒中的持續時間
AnimateContaineering	細繩	“舒適”	放鬆容器動畫
AnimateOnmount	布爾	false	如果為true ，則將組件安裝在初始渲染中時應用enterAnimation
className	細繩	undefined	在容器元素中設置的CSS類
ClassNameenter	細繩	undefined	CSS類要在enterAnimation中設置在集裝箱元素中
classNameExit	細繩	undefined	exitAnimation期間，在容器元素中設置的CSS類
禁用	布爾	false	禁用所有動畫
腸道	AnimationSettings |動畫[]	undefined	新組件安裝時將應用的Web動畫API參數
出口	AnimationSettings |動畫[]	undefined	噹噹前組件將卸載時將應用的Web動畫API參數
懶惰的	布爾	false	如果使用交叉點觀察者API在視口中可見，則將應用enterAnimation和exitAnimation 。如果true容器元素將始終在DOM中
懶惰	交點	undefined	交叉點觀察者選項
ententerfined	（）=> void	undefined	enterAnimation結束時回調
onexitfined	（）=> void	undefined	exitAnimation完成後回調
風格	React.cssproperties	undefined	在容器元素中設置的內聯樣式

例子

首先克隆回購：然後：

 npm install
npm start