react component transitionのダウンロード - react component transitionソースコードのダウンロード

react component transition

サードパーティ製コンポーネント

Presets duration & deps update

ダウンロード

React-Component-Transition

Web Animations APIを使用して、簡単に使用できる反応コンポーネントを使用して、コンポーネントトランジション間でアニメーションを適用します。

デモ

https://dgpedro.github.io/ReaCtComponent-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 >
    ) ;
} ;

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

カスタムアニメーション

 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は、 enterAnimationおよび/またはexitAnimation小道具で使用できるアニメーションのセットです。利用可能なものは次のとおりです。

 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`場合、コンテナは出口コンポーネントサイズからエントリコンポーネントサイズにアニメーション化します注：すべてのプリセットには、このプロップがデフォルトで`true`に設定されています
AnimateContainerduration	番号	300	コンテナアニメーションのミリ秒単位での期間
AnimateContainereasing	弦	"容易に"	コンテナアニメーションの緩和
AnimateOnMount	ブール	`false`	`true`場合、最初のレンダリングにコンポーネントがマウントされたときに`enterAnimation`を適用します
className	弦	`undefined`	コンテナ要素に設定するCSSクラス
classNameEnter	弦	`undefined`	`enterAnimation`中にコンテナ要素に設定するCSSクラス
classNameExit	弦	`undefined`	`exitAnimation`中にコンテナ要素に設定するCSSクラス
無効	ブール	`false`	すべてのアニメーションを無効にします
停止	AnimationSettings \| AnimationSettings []	`undefined`	新しいコンポーネントがマウントされるときに適用されるWebアニメーションAPIパラメーター
出口	AnimationSettings \| AnimationSettings []	`undefined`	現在のコンポーネントがアンマウントされるときに適用されるWebアニメーションAPIパラメーター
怠け者	ブール	`false`	交差点オブザーバーAPIを使用してコンポーネントがビューポートに表示される場合、 `enterAnimation`と`exitAnimation`適用します。 `true`コンテナ要素が常にdomにある場合
lazyoptions	交差点	`undefined`	交差点オブザーバーオプション
Onenterfinished	（）=> void	`undefined`	`enterAnimation`が終了したときのコールバック
OneXitFinished	（）=> void	`undefined`	`exitAnimation`が終了したときのコールバック
スタイル	React.CSSPROPERTIES	`undefined`	コンテナ要素に設定するインラインスタイル