React Transition Group -- TransitionGroup 組件

導語

Transition組件
CSSTransition組件

該庫的前兩個基本組件可以查看以上鍊接🔗，今天搬到了新的房子裏，還是很滿意的，明天就要去新公司報道了，希望能和新同事好好相處，完成2019年的幾個目標。

TransitionGroup

<TransitionGroup>組件管理列表中的一組<Transition>組件。與<Transition>類似，<TransitionGroup>是一種狀態機，用於管理組件隨時間的安裝和卸載。

下面的例子使用了之前的漸變CSS過渡。當項目被刪除或添加到TodoList時，in屬性會被自動切換。可以在<TransitionGroup>中使用任何<Transition>組件，而不僅僅是css。

第一步： 導入需要的文件

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

第二步：編寫初始state裏的列表項

state = {
    items: [
      { id: 1, text: 'Buy eggs' },
      { id: 2, text: 'Pay bills' },
      { id: 3, text: 'Invite friends over' },
      { id: 4, text: 'Fix the TV' },
    ]
  }

第三步：編寫列表項

<TransitionGroup className="todo-list">
  {items.map(({ id, text }) => (
    <CSSTransition
      key={id}
      timeout={500}
      classNames="show">
      <div className="todo-list-item">
        <button
          className='cancle'
          onClick={() => {
            this.setState(state => ({
              items: state.items.filter(
                item => item.id !== id
              ),
            }));
          }}>
          &times;
        </button>
        <span className='item-text'>{text}</span>
      </div>
    </CSSTransition>
  ))}
</TransitionGroup>

記住，要把所有需要管理的列表項都寫在<TransitionGroup> 中，其次，<CSSTranstion> 組件的in屬性此時由<TransitionGroup> 管理了，不需要單獨設置了，當點擊刪除按鈕時，list中的對應項將會被刪除，對應項的in 屬性將會被自動改爲false，從而觸發離場動畫。

第四步：添加按鈕

<button
  className='add'
  onClick={() => {
    const text = prompt('Enter some text');
    if (text) {
      this.setState(state => ({
        items: [
          ...state.items,
          { id: 1123, text },
        ],
      }));
    }
  }}>
  Add Item
</button>

當點擊添加按鈕，輸入文字後，將會把此項添加到列表中，此時in屬性爲true，同時默認設置了首次動畫，所以會觸發一次進場動畫。

效果圖

完整代碼

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

export default class App extends Component {

  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 className='container'>
        <TransitionGroup className="todo-list">
          {items.map(({ id, text }) => (
            <CSSTransition
              key={id}
              timeout={500}
              classNames="show"
              unmountOnExit>
              <div className="todo-list-item">
                <button
                  className='cancle'
                  onClick={() => {
                    this.setState(state => ({
                      items: state.items.filter(
                        item => item.id !== id
                      ),
                    }));
                  }}>
                  &times;
                </button>
                <span className='item-text'>{text}</span>
              </div>
            </CSSTransition>
          ))}
        </TransitionGroup>
        <button
          className='add'
          onClick={() => {
            const text = prompt('Enter some text');
            if (text) {
              this.setState(state => ({
                items: [
                  ...state.items,
                  { id: 1123, text },
                ],
              }));
            }
          }}>
          Add Item
        </button>
      </div>
    )
  }
}

//index.css
.show-enter {
    opacity: 0.01;
  }
.show-enter-active {
    opacity: 1;
    transition: all 300ms ease-out;
}
.show-exit {
    opacity: 1;
}
.show-exit-active {
    opacity: 0.01;
    transition: all 300ms ease-out;
}

.container {
    position: absolute;
    top: 20px;
    left: 100px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px 1px rgb(202, 202, 202);
}

.todo-list {
    border-radius: 5px;
    box-shadow: 0 0 5px 1px rgb(202, 202, 202);
}

.todo-list-item {
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    border-bottom: 1px solid rgb(202, 202, 202);
}

.todo-list-item:last-of-type {
    border-bottom: 0;
}

.item-text {
    margin-left: 10px;
}

.cancle {
    border: 0;
    color: #fff;
    background-color: #F04134;
    border-radius: 3px;
    box-shadow: 0 0 5px 1px rgb(202, 202, 202);
}

.add {
    border: 0;
    height: 30px;
    line-height: 30x;
    width: 120px;
    margin-top: 15px;
    font-size: 14px;
    border-radius: 3px;
    box-shadow: 0 0 5px 1px rgb(202, 202, 202);
}

Porps

<TransitionGroup> 的常用屬性主要就2個

component

default 'div' 也就是TransitionGroup渲染出來的標籤爲div，也可以就行更改，例如component="span" 渲染出來的就是span標籤了

type: any
default: 'div'

children

相當於你給的組件，可以是字符串或者自定義組件等。

type: any