react component transition Download- react component transition 소스 코드 다운로드

react component transition

타사 구성 요소

Presets duration & deps update

다운로드

반응 성분 전달

사용하기 쉬운 반응 구성 요소를 사용하여 웹 애니메이션 API를 사용하여 구성 요소 전환간에 애니메이션을 적용합니다.

데모

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

설치하다

 npm install react-component-transition --save

TypeScript

유형은 패키지에 포함되어 있습니다.

목표

주요 목표는 한 구성 요소에서 다른 구성 요소로 전환 할 때 간단한 애니메이션을 쉽게 적용 할 수있는 쉽고 빠른 방법을 제공하는 것입니다. 너무 많은 시간 테스트, 조정, 스타일링 등을 잃지 않으면 서 ... 몇 줄만 있으면 React 페이지를 훨씬 더 대화식 및 사용자 친화적으로 만들 수 있습니다.

폴리 필

지원할 브라우저에 따라 일부 폴리 필이 필요할 수 있습니다.

웹 애니메이션 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에서 사용할 수있는 이미 정의 된 일련의 애니메이션입니다. 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` 이라면 컨테이너도 종료 구성 요소 크기에서 입력 구성 요소 크기로 애니메이션됩니다. 참고 : 모든 사전 설정 에이 소품이 기본적으로 `true` 로 설정되어 있습니다.
AnimateContainerDuration	숫자	300	컨테이너 애니메이션의 밀리 초의 지속 시간
animatecontainereasing	끈	"쉬움"	컨테이너 애니메이션 완화
animateonmount	부울	`false`	`true` 인 경우, 구성 요소가 초기 렌더링에서 마운트 할 때 `enterAnimation` 적용합니다.
클래스 이름	끈	`undefined`	CSS 클래스 컨테이너 요소에서 설정합니다
ClassNameenter	끈	`undefined`	`enterAnimation` 동안 컨테이너 요소에 설정할 CSS 클래스
classnameexit	끈	`undefined`	`exitAnimation` 동안 컨테이너 요소에 설정할 CSS 클래스
장애가 있는	부울	`false`	모든 애니메이션을 비활성화합니다
enteranimation	애니메이션 세팅 \| Animationsettings []	`undefined`	웹 애니메이션 API 매개 변수 새 구성 요소가 마운트 할 때 적용 할 수 있습니다.
exitanimation	애니메이션 세팅 \| Animationsettings []	`undefined`	웹 애니메이션 API 매개 변수는 현재 구성 요소가 마운트되지 않을 때 적용됩니다.
게으른	부울	`false`	교차로 관찰자 API를 사용하여 뷰포트에서 구성 요소가 표시되는 경우 `enterAnimation` 및 `exitAnimation` 적용합니다. `true` 컨테이너 요소가 항상 DOM에 있으면
LazyOptions	교차점	`undefined`	교차 관찰자 옵션
oneNerfinished	() => void	`undefined`	`enterAnimation` 완료 될 때 콜백
OneXitFinished	() => void	`undefined`	`exitAnimation` 완료 될 때 콜백
스타일	React.cssproperties	`undefined`	컨테이너 요소에 설정할 인라인 스타일