React Transition Group -- Transition 组件

Object

导语

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

阅读 3.6k
18 声望
2 粉丝
0 条评论
18 声望
2 粉丝
文章目录
宣传栏