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