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) -> voiddefault: function noop() {}