导语
新的一年，换了新的工作也算是新的开始吧，最近对页面的切换动画比较感兴趣，所以就以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() {}
