React Transition Group -- TransitionGroup 元件
摘要：
導語
Transition元件
CSSTransition元件
該庫的前兩個基本元件可以檢視以上鍊接:link:，今天搬到了新的房子裡，還是很滿意的，明天就要去新公司報道了，希望能和新同事好好相處，完成2019年的幾個目標。
TransitionGroup ...
導語
該庫的前兩個基本元件可以檢視以上鍊接:link:，今天搬到了新的房子裡，還是很滿意的，明天就要去新公司報道了，希望能和新同事好好相處，完成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
),
}));
}}>
×
</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
),
}));
}}>
×
</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