react 官網動畫庫（react-transition-group）的新寫法

時間 2019-11-06

標籤 react 動畫 transition group 寫法欄目 React 简体版

原文原文鏈接

1、react-transition-group 一個官網提供的動畫過分庫。

搜索了網上關於react動畫的，不少的答案都是好久之前的了老版本了，而如今官方提供的是叫react-transition-group 它是之前兩個的合體版本，因此寫下這個記錄一下，同時也給一些須要的猿門給一些小的提示。
一、安裝css

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

# yarn
yarn add react-transition-group

而官方提供的三個組建Transition,CSSTransition,TransitonGroup。node

Transition

過渡組件(Transiton)容許您用一個簡單的聲明性API描述隨着時間的推移從一個組件狀態到另外一個組件狀態的轉換。最經常使用的是用來動畫一個組件的安裝和卸載，但也能夠用來描述在適當的過渡狀態。默認狀況下，該組件不會更改其呈現的組件的行爲，它只跟蹤組件的「進入」和「退出」的狀態。由你來爲這些狀態定義效果。（翻譯）
實際的狀況就是你若是隻寫這個組件是沒有任何的效果的，就和你寫一個div同樣。因此你須要給他們賦予一些參數才能夠。例以下面這個例子react

//本身簡單的封裝了一個，該有的參數都由了，能夠自行粘貼在本身的代碼裏面去試試。
class Fade extends React.Component {
  constructor(props) {
    super(props);
  }
  done =() => {
    // console.log('結束了')
  }
  addaddEndListener = (node) => { //原生時間transition運動的事件
    node.addEventListener('transitionend', this.done, false);
  }

  // 三個進入狀態的事件，能夠作你想作的事情
  onEnter = (node, isAppearing) => {
    console.log(isAppearing, 'onEnter')
  }
  onEntering = (node, isAppearing) => {
    console.log(isAppearing, 'onEntering')
  }
  onEntered = (node, isAppearing) => {
    console.log(isAppearing, 'onEntered')
  }

  // 三個退出的狀態的事件
  onExit = (node) => {
    console.log('onExit')
  }
  onExiting = () => {
    console.log('onExiting')
  }
  onExited = () => {
    console.log('onExited')
    this.props.self()
  }
  render() {
    const { in: inProp, dur} = this.props;
    const defaultStyle = {
      transition: `transform ${300}ms ease-in-out, opacity ${300}ms ease-in-out`,
      transform: 'translateX(100px)',
      opacity: '0'
    }

    const transitionStyles = {
      entering: { transform: 'translateX(100px)', opacity: '0'},
      entered:  { transform: 'translateX(0px)', opacity: '1' },
      exiting: {transform: 'translateX(0px)', opacity: '1'},
      exited: {transform: 'translateX(0px)', opacity: '0'}
    };
    const duration = {
      enter: 300,
      exit: 300,
    }
    // 上面的都是基本參數，樣式的轉變以及時間的設定，具體的能夠看官網文檔
    // 樣式也能夠寫成className 例如<MyComponent className={`fade fade-${status}`} />
    return (
      <Transition 
        onEnter={this.onEnter}
        onEntering={this.onEntering}
        onEntered={this.onEntered}

        onExit={this.onExit}
        onExiting={this.onExiting}
        onExited={this.onExited}

        addEndListener={this.addaddEndListener} 
        in={inProp} 
        unmountOnExit={false} // 爲true 表明退出的時候移除dom
        appear={true} // 爲true  渲染的時候就直接執行動畫，默認false，
        timeout={duration}
      >
        {
          state => {
            console.log(state, '###') //你能夠很直觀的看到組件加載和卸載時候的狀態
            return(
              <div style={{
                ...defaultStyle,
                ...transitionStyles[state]
              }}>
                {this.props.children}
              </div>
            )
          }
        }
      </Transition>
    );
  }
}

其中上面的狀態有四種：npm

entering
entered
exiting
exited

組件的初始化狀態都停留在exited
上面就是寫的一個最基本的例子，下面是如何的調用app

let num = 1;
class Dnd extends React.Component {
  state = {
    ins: true,
    current: 1,
    dom: <div className={l.test}>
            ceshi weizhi {num}
          </div>
  }
  handle = (bool) => {
    this.setState({
      test: !bool
    })
  }
  end = () => {
    const that = this;
    num = num + 1;
    setTimeout(function () {
      that.setState({
        test: true,
        dom: <div className={l.test}>
              888888 {num}
            </div>
      }) 
    }, 500)
    
  }
  render () {
    const { location } = this.props
    const { test } = this.state;
    return (
      <MainLayout location={location}>
        <Button onClick={this.handle.bind(null, this.state.test)}>點擊transition</Button>
        <Fade in={this.state.test} self={this.end}>
          {this.state.dom}
        </Fade>
      </MainLayout>
    )
  }
}
// 效果是每次點擊按鈕都會進行一次進場和出場的動畫。也能夠自行衍生。

這個組件大概就是這樣的，這樣適合寫一個tab類型的頁面，在切換的時候能夠展現不一樣的dom

CSSTransition

此組件是在轉換的出現、進入、退出階段應用一對類名(也就是className),靠這個來激活CSS動畫。因此參數和平時的className不一樣，參數爲：classNames
參數：（主要）in, timeout, unmountOnExit, classNames, 用法同Transition。看以下例子：dom

state  = {
    star: false
}


<Button onClick={this.handleStar.bind(null, star)}>start</Button>
<CSSTransition
  in={star}
  timeout={300}
  classNames="star"
  unmountOnExit
>
  <div className="star">⭐</div>
</CSSTransition>

效果是點擊button 顯示星星，在點擊消失星星的動畫！
參數classNames="star", 組件會找對應狀態的className, 以下函數

.star {
    display: inline-block;
    margin-left: 0.5rem;
    transform: scale(1.25);
  }
  .star-enter {
    opacity: 0.01;
    transform: translateY(-100%) scale(0.75);
  }
  .star-enter-active {
    opacity: 1;
    transform: translateY(0%) scale(1.25);
    transition: all 300ms ease-out;
  }
  .star-exit {
    opacity: 1;
    transform: scale(1.25);
  }
  .star-exit-active {
    opacity: 0;
    transform: scale(4);
    transition: all 300ms ease-in;
  }

依次執行的順序是動畫

一、星星顯示 對應的class爲star-enter star-enter-active 動畫走完爲star-enter-done
二、星星消失 對應的class爲star-exit  star-exit-active 動畫走完爲star-exit-done

若是按照官網的解釋就是以下，有興趣的能夠自行去試一試。this

classNames={{
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter,
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit,
}}

每一個階段的鉤子函數同Transition.spa

TransitionGroup

一看group就知道確定是列表形態的動畫了！可是看了官網後知道，TransitionGroup不提供任何形式的動畫，具體的動畫取決與你包裹的Transition || CSSTransition的動畫，因此你能夠在列表裏面作出不一樣類型的動畫出來。下面來看一個例子

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, text: 'Buy eggs' },
        { id: 2, text: 'Pay bills' },
        { id: 3, text: 'Invite friends over' },
        { id: 4, text: 'Fix the TV' },
      ]
    }
  }

  render() {
    const { items } = this.state; 
    return (
      <div>
        <TransitionGroup className="todo-list">
          {items.map(({ id, text }) => (
            <CSSTransition
              key={id}
              timeout={500}
              classNames="fade"
            >
              <div>
                <Button
                  onClick={() => {
                    this.setState(state => ({
                      items: state.items.filter(
                        item => item.id !== id
                      ),
                    }));
                  }}
                >
                  &times;
                </Button>
                {text}
              </div>
            </CSSTransition>
          ))}
        </TransitionGroup>
        <Button
          type="button"
          onClick={() => {
            const text = prompt('Enter some text');
            if (text) {
              this.setState(state => ({
                items: [
                  ...state.items,
                  { id: 1123, text },
                ],
              }));
            }
          }}
        >
          Add Item
        </Button>
      </div>
    );
  }
}

css

.fade-enter {
    opacity: 0.01;
  }
  .fade-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
  }
  .fade-exit {
    opacity: 1;
  }
  .fade-exit-active {
    opacity: 0.01;
    transition: opacity 500ms ease-in;
  }

效果是增長和刪除列表項中的一個，產生漸入漸失的效果！說白了也就是多個Transition 或者CSSTransition組合的效果。
可是也提供一些參數

一、component  default 'div' 也就是TransitionGroup渲染出來的標籤爲div，也能夠就行更改，例如component="span" 渲染出來的就是span標籤了
二、children 至關於你給的組件，能夠是字符串或者自定義組件等。
三、appear  寫在TransitionGroup裏面至關於開啓或者禁止裏面的Transition || CSSTransition 方便寫的做用

三個組件大概的特性就是這些。剩下的全靠本身去開發了！後續會錄入一些小的例子來說解，敬請期待。。。。