react component transition

رد الفعل المنسدلة المكون

من السهل استخدام مكون React لتطبيق الرسوم المتحركة بين انتقالات المكونات ، باستخدام واجهة برمجة تطبيقات الرسوم المتحركة على الويب .

العرض التوضيحي

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

ثَبَّتَ

 npm install react-component-transition --save

TypeScript

يتم تضمين الأنواع في الحزمة.

هدف

الهدف الرئيسي هو توفير طريقة سهلة وسريعة لتطبيق الرسوم المتحركة البسيطة عند الانتقال من مكون إلى آخر - دون أن تخسر الكثير من الاختبار الزمني ، والضبط ، والتصميم ، وما إلى ذلك ... في خطين فقط ، من الممكن جعل أي صفحة تفاعلية أكثر تفاعلية وسهلة الاستخدام.

polyfills

اعتمادًا على المتصفح لدعمه ، قد تكون هناك حاجة إلى بعض عمليات تعددات:

• واجهة برمجة تطبيقات الرسوم المتحركة على شبكة الإنترنت
• API API للمراقب التقاطع (فقط إذا تم تعيين Prop lazy على true )
• يعد

الاستخدام

ComponentTransition

 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

لاستخدامها مع القوائم. ما عليك سوى إرجاع ComponentTransition أو أي إعداد مسبق في وظيفة map الخاصة بك ولفها جميعًا باستخدام 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 . المتوفرة هي:

 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	المدة في ميلي ثانية من الرسوم المتحركة للحاوية
AnimateContainereare	خيط	"يُسَهّل"	تخفيف الرسوم المتحركة للحاويات
ANIMATONMOUNT	منطقية	false	إذا كان true ، فطبق enterAnimation عندما يتصاعد المكون في العرض الأولي
اسم الفصل	خيط	undefined	فئة CSS لضبطها في عنصر الحاوية
classNameenter	خيط	undefined	فئة CSS لضبطها في عنصر الحاوية أثناء enterAnimation
classNameExit	خيط	undefined	فئة CSS لضبطها في عنصر الحاوية أثناء exitAnimation
عاجز	منطقية	false	تعطيل جميع الرسوم المتحركة
enteranimation	الرسوم المتحركة الرسوم المتحركة []]	undefined	معلمات واجهة برمجة التطبيقات للرسوم المتحركة على شبكة الإنترنت المراد تطبيقها عند تصاعد مكون جديد
الخروج	الرسوم المتحركة الرسوم المتحركة []]	undefined	معلمات واجهة برمجة تطبيقات الرسوم المتحركة على شبكة الإنترنت التي سيتم تطبيقها عندما يقوم المكون الحالي بعدم الجوهرة
كسول	منطقية	false	سيتم تطبيق enterAnimation و exitAnimation إذا كان المكون مرئيًا في منفذ العرض باستخدام API للمراقب التقاطع. إذا كان عنصر الحاوية true سيكون دائمًا في DOM
LazyOptions	تقاطع	undefined	خيارات مراقب التقاطع
onEnerfinished	() => باطلة	undefined	رد الاتصال عند الانتهاء من enterAnimation
Onexitfinished	() => باطلة	undefined	رد الاتصال عند انتهاء exitAnimation
أسلوب	React.cssproperties	undefined	أنماط مضمنة في عنصر الحاوية

أمثلة

استنساخ الريبو أولاً ثم:

 npm install
npm start