การดาวน์โหลด react component transition react component transition

react component transition

ส่วนประกอบของบุคคลที่สาม

Presets duration & deps update

ดาวน์โหลด

การเปลี่ยนองค์ประกอบ

ใช้งานง่ายที่ใช้งานง่ายเพื่อใช้ภาพเคลื่อนไหวระหว่างการเปลี่ยนส่วนประกอบโดยใช้ Web Animations API

การสาธิต

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

ติดตั้ง

 npm install react-component-transition --save

ตัวพิมพ์ใหญ่

ประเภทจะรวมอยู่ในแพ็คเกจ

เป้าหมาย

เป้าหมายหลักคือการให้วิธีที่ง่ายและรวดเร็วในการใช้แอนิเมชั่นง่าย ๆ เมื่อเปลี่ยนจากส่วนประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่ง - โดยไม่สูญเสียการทดสอบเวลามากเกินไปการปรับแต่งสไตล์ ฯลฯ ... ในสองสามบรรทัดมันเป็นไปได้ที่จะทำให้หน้าตอบสนอง

โพลีฟิลด์

อาจจำเป็นต้องใช้โพลีฟิลด์ขึ้นอยู่กับเบราว์เซอร์บางอย่าง:

เว็บแอนิเมชั่น API
Intersection Observer API (เฉพาะในกรณีที่ lazy Prop ตั้งค่าเป็น 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

ที่จะใช้กับรายการ เพียงส่งคืน 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 >
    ) ;
} ;

ด้วย 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 เป็นชุดของแอนิเมชั่นที่กำหนดไว้แล้วซึ่งสามารถใช้ใน enterAnimation และ/หรือ exitAnimation Props Availabe คนคือ:

 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	ระยะเวลาเป็นมิลลิวินาทีของแอนิเมชั่นคอนเทนเนอร์
animatecontainereasing	สาย	"ผ่อนปรน"	การผ่อนคลายแอนิเมชั่นคอนเทนเนอร์
AnimateOnmount	บูลีน	`false`	ถ้า `true` ให้ใช้ `enterAnimation` เมื่อส่วนประกอบติดตั้งในการแสดงผลเริ่มต้น
ชื่อชั้นเรียน	สาย	`undefined`	คลาส CSS ที่จะตั้งค่าในองค์ประกอบคอนเทนเนอร์
classnameenter	สาย	`undefined`	คลาส CSS ที่จะตั้งค่าในองค์ประกอบคอนเทนเนอร์ในระหว่าง `enterAnimation`
classnameExit	สาย	`undefined`	คลาส CSS ที่จะตั้งค่าในองค์ประกอบคอนเทนเนอร์ในระหว่าง `exitAnimation`
พิการ	บูลีน	`false`	ปิดใช้งานภาพเคลื่อนไหวทั้งหมด
การอสังหาริมทรัพย์	แอนิเมชั่น แอนิเมชั่นการตั้งค่า []	`undefined`	เว็บแอนิเมชั่นแอนิเมชั่นพารามิเตอร์ API ที่จะนำไปใช้เมื่อส่วนประกอบใหม่ติดตั้ง
การอนิเมชั่น	แอนิเมชั่น แอนิเมชั่นการตั้งค่า []	`undefined`	เว็บแอนิเมชั่นแอนิเมชั่นพารามิเตอร์ API ที่จะใช้เมื่อส่วนประกอบปัจจุบันจะยกเลิกการเชื่อมต่อ
ขี้เกียจ	บูลีน	`false`	จะใช้ `enterAnimation` และ `exitAnimation` หากส่วนประกอบสามารถมองเห็นได้ในวิวพอร์ตโดยใช้ API Observer Intersection หากองค์ประกอบคอนเทนเนอร์ `true` จะอยู่ใน DOM เสมอ
LazyOptions	จุดตัด	`undefined`	ตัวเลือกผู้สังเกตการณ์สี่แยก
มีการก่อตั้งขึ้น	() => โมฆะ	`undefined`	โทรกลับเมื่อ `enterAnimation` เสร็จสิ้น
เป็นหนึ่งเดียว	() => โมฆะ	`undefined`	การโทรกลับเมื่อ `exitAnimation` เสร็จสิ้น
สไตล์	react.cssproperties	`undefined`	สไตล์อินไลน์ที่จะตั้งค่าในองค์ประกอบคอนเทนเนอร์