React Transition Group -- Transition 组件

导语

新的一年，换了新的工作也算是新的开始吧，最近对页面的切换动画比较感兴趣，所以就以React Transition Group库为切入口做一些深入的理解吧。

安装

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

官方提供三个组件，分别为 Transition, CSSTransition, TransitonGroup。
这一章主要介绍下 Transition 组件。

Transition

Transition 组件允许您使用简单的声明性API描述从一个组件状态到另一个组件状态的转换。最常见的是，它用于动画组件的安装和卸载，但也可以用于描述就地的过渡状态。

默认情况下，转换组件不改变它呈现的组件的行为，它只跟踪组件的“进入”和“退出”状态。由你来赋予这些状态意义和效果。例如，我们可以在组件进入或退出时向其添加样式。

如前所述，转换组件本身不会对其子组件执行任何操作。它所做的是随时间跟踪转换状态，以便在组件更改状态时更新组件(例如通过添加样式或类)。

在一个过渡中有四种主要状态:

• entering
• entered
• exiting
• exited

过渡状态通过in属性切换。当为true时，组件开始“Enter”阶段。在此阶段中，组件将从当前转换状态转移到转换期间的“进入”状态，然后在完成转换后再转移到“进入”状态。

看完了基本介绍，下面来一个最基本的例子：

首先，创建我们的 Fade 组件

第一步：定义属性

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
}

const transitionStyles = {
    entering: { opacity: 0 },
    entered:  { opacity: 1 },
}

第二步：定义组件

const Fade = (props) => (
    <Transition in={props.inProp} timeout={duration}>
        {(state) => (
            <div style={{
                ...defaultStyle,
                ...transitionStyles[state]
            }}>
                {props.children}
            </div>
        )}
    </Transition>
)

Transition 组件的 in 属性是一个 boolean 值，由子组件传入，用于控制子组件的状态，是否显示。
我们的 Fade 组件创建好了，接下来就该试试好不好用了，我们创建一个新的组件，定义一些简单的样式，定义一个内部状态show，传入Fade 组件，然后使用 Fade 组件包裹它。

export default class App extends Component {

    state = {
        show: true
    }

    render () {
        const circle = {
            margin: 2,
            width: 100,
            height: 100,
            position: 'absolute',
            display: 'inline-block',
            left: 100,
            boxShadow: '0px 1px 2px #999',
            textShadow: '0px 1px 2px #999',
            lineHeight: '100px',
            textAlign: 'center',
            color: 'white',
            fontSize: 10,
        }
        return (
            <Fade inProp={this.state.show}>
                <div style={circle} onClick={()=>this.setState(state=>({show: !state.show}))}>
                    Show
                </div>
            </Fade>
        )
    }
}

效果图：

Props

我们来看看 Trasition 组件的其它常用属性。

children

可以使用一个函数来代替 React 元素，通过调用这个函数与当前过渡状态(‘enter’、‘enter’、‘exit’、‘exited’、‘unmount’),可用于将特定于上下文的props应用于组件。

type: Function | element
required

in

用于显示组件;触发进入或退出状态

type: boolean
default: false

mountOnEnter

默认情况下，子组件与父转换组件一起立即挂载。如果你想“延迟挂载”第一个in={true}上的组件，你可以设置mountOnEnter。在第一次进入转换之后，组件将保持挂载状态，即使在“退出”状态下也是如此，除非你还指定unmountOnExit。

type: boolean
default: false

unmountOnExit

默认情况下，子组件在达到“退出”状态后仍然挂载。如果你希望在组件退出后卸载组件，请设置unmountOnExit。

type: boolean
default: false

appear

通常，如果组件挂载时显示组件，则该组件不进行转换。如果您希望在第一个挂载集上进行转换，则显示为true，并且组件将在< transition >挂载后立即进行转换。
注意:没有特定的“显示”状态。appear只添加一个额外的enter转换。

type: boolean
default: false

enter

启用或禁用enter转换。

type: boolean
default: true

exit

启用或禁用exit转换。

type: boolean
default: true

timeout

转换的持续时间，单位为毫秒。

timeout={{
 enter: 300,
 exit: 500,
}}

type: number | { enter?: number, exit?: number }

addEndListener

添加自定义转换结束触发器。使用正在转换的DOM节点和done回调调用。允许更细粒度的转换结束逻辑。注意:如果提供超时，仍将其用作回退。

addEndListener={(node, done) => {
  // use the css transitionend event to mark the finish of a transition
  node.addEventListener('transitionend', done, false);
}}

type: Function

onEnter

在应用“输入”状态之前触发的回调。提供了一个额外的参数isAppearing，以指示是否在初始挂载上出现了enter阶段。

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: function noop() {}

onEntering

在应用“输入”状态之前触发的回调。提供了一个额外的参数isAppearing，以指示是否在初始挂载上出现了entering阶段。

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: function noop() {}

onEntered

在应用“输入”状态之前触发的回调。提供了一个额外的参数isAppearing，以指示是否在初始挂载上出现了entered阶段。

type: Function(node: HtmlElement, isAppearing: bool) -> void
default: function noop() {}

onExit

在应用“退出”状态之前触发的回调。

type: Function(node: HtmlElement) -> void
default: function noop() {}

onExiting

在应用“退出”状态之后触发的回调。

type: Function(node: HtmlElement) -> void
default: function noop() {}

onExited

应用“退出”状态后触发的回调。

type: Function(node: HtmlElement) -> void
default: function noop() {}