利用React官網動畫庫（react-transition-group）實現過渡動畫

官方提供了 react-transition-group 庫來實現過渡動畫，與vue官方提供的 transition 很類似，利用它實現過渡動畫。

一、安裝

npm : npm install react-transition-group --save
yarn : yarn add react-transition-group

二、使用

官網給出了4種API，分別是 Transition 、CssTransition 、SwitchTransition 、TransitionGroup，今天我們主要使用 CssTransition 與 TransitionGroup

CssTransition

被包裹dom在出現、進入、退出階段利用 CssTransition 提供的 classNames 激活CSS動畫

參數：in, timeout, unmountOnExit, classNames, onEntered，onExited，用法同Transition

案例：

import React, { Component } from 'react'
import '../../index.css'
import { CSSTransition } from 'react-transition-group'

export default class AnimationByCss extends Component {
	constructor(props){
		super(props)
		this.state = {
			show:false
		}
	}
	hander = () => {
	    this.setState({
	      show:!this.state.show
	    })
	}
	render() {
	    let { show } = this.state
	    return (
	      <div>
	        <div className='shoppingCart_button' onClick={() => this.handler()}>{show ? '執行出場動畫' : '執行入場動畫'}</div>
	        <CSSTransition
			    in={this.state.show} // 如果this.state.show從false變爲true，則動畫入場，反之出場動畫
	            timeout={1000} //動畫執行1秒
	            classNames='fade' //自定義的class名
	            unmountOnExit // 當動畫出場後在頁面上移除包裹的dom節點
	            onEntered={(el) => { }} // 入場動畫執行完畢的回調
	            onExited={(el) => { }} // 出場動畫執行完畢的回調
	        >
	          <div className='main'></div>
	        </CSSTransition>
	      </div>
	    )
	}
}

// index.css:
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.shoppingCart_button {
  width: 100px;
  padding: 10px 10px;
  border: 1px #eee solid;
  cursor: pointer;
  user-select: none;
  margin-bottom: 50px
}

/*被執行元素默認樣式*/
.main {
  opacity: 0;
  transform: translateX(200px);
  transition: all 0.5s linear;
  width: 400px;
  height: 400px;
  background-color: #000;
  border: 1px #eee solid;
  border-radius: 10px
}

/*enter：入場前*/
.fade-enter {
  opacity: 0;
}

/*enter-active：入場後到入場結束*/
.fade-enter-active {
  transform: translateX(0px);
  opacity: 1;
}

/*enter-done：入場動畫執行完畢後，保持狀態*/
.fade-enter-done {
  transform: translateX(0px);
  opacity: 1;
}

/*enter：出場前*/
.fade-exit {
  opacity: 1;
}

/*enter-active：出場後到出場結束*/
.fade-exit-active {
  transform: translateX(200px);
  opacity: 0;
}

/*enter-done：出場動畫執行完畢後，保持狀態*/
.fade-exit-done {
  opacity: 0;
}

TransitionGroup

列表形態的動畫：如果頁面上一組dom都需要添加動畫效果，在最外面再加一個TransitionGroup即可

案例：

import React, {Component} from 'react'
import '../../index.css'
import { TransitionGroup, CSSTransition } from 'react-transition-group'

export default class ShoppingCart extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [{text: 'Vue'}, {text: 'React'}, {text: 'Angular'}]
    }
  }

  // ADD
  add = () => {
    let result = window.prompt('Add')
    if (result){
      this.setState({
        list:[...this.state.list,{text:result}]
      })
    }
  }

  // delete
  deleteItem = (index) => {
    this.state.list.splice(index,1)
    this.setState(['list'])
  }

  render() {
    let { list } = this.state
    return (
      <div style={{paddingLeft: '100px'}}>
        <div className='shoppingCart_button' onClick={() => this.add()}>Add item ...</div>
        <TransitionGroup>
          {list.map((item, index) => (
            <CSSTransition
              key={item.text}
              timeout={500} //動畫執行1秒
              classNames='fade' //自定義的class名
            >
              <div className='todo_list' onClick={() => this.deleteItem(index)}>
                <div className='todo_item'>
                  {item.text}
                </div>
              </div>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </div>
    )
  }
}

// index.css:
.todo_list {
  transition: all 0.3s linear;
  width: 400px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px #999 solid;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: #000000;
  box-shadow: 1px 1px 5px 0 #000;
  color: #fff;
}

/*enter：入場前*/
.fade-enter {
  transform: translateX(300px);
  opacity: 0;
}

/*enter-active：入場後到入場結束*/
.fade-enter-active {
  transform: translateX(0px);
  opacity: 1;
}

/*enter-done：入場動畫執行完畢後，保持狀態*/
.fade-enter-done {
  transform: translateX(0px);
  opacity: 1;
}

/*enter：出場前*/
.fade-exit {
  opacity: 1;
}

/*enter-active：出場後到出場結束*/
.fade-exit-active {
  transform: translateX(200px);
  opacity: 0;
}

/*enter-done：出場動畫執行完畢後，保持狀態*/
.fade-exit-done {
  opacity: 0;
}

根據上面的 CSS 過渡動畫效果，下篇文章準備實現：利用 react-transition-group 實現APP路由切換翻頁動畫…