Transition組件
CSSTransition組件css
該庫的前兩個基本組件能夠查看以上連接🔗,今天搬到了新的房子裏,仍是很滿意的,明天就要去新公司報道了,但願能和新同事好好相處,完成2019年的幾個目標。react
<TransitionGroup>組件管理列表中的一組<Transition>組件。與<Transition>相似,<TransitionGroup>是一種狀態機,用於管理組件隨時間的安裝和卸載。segmentfault
下面的例子使用了以前的漸變CSS過渡。當項目被刪除或添加到TodoList時,in屬性會被自動切換。能夠在<TransitionGroup>中使用任何<Transition>組件,而不單單是css。動畫
第一步: 導入須要的文件this
import React,{ Component } from 'react' import { CSSTransition, TransitionGroup } from 'react-transition-group' import './css/index.css'
第二步:編寫初始state裏的列表項spa
state = { items: [ { id: 1, text: 'Buy eggs' }, { id: 2, text: 'Pay bills' }, { id: 3, text: 'Invite friends over' }, { id: 4, text: 'Fix the TV' }, ] }
第三步:編寫列表項code
<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,從而觸發離場動畫。component
第四步:添加按鈕圖片
<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,同時默認設置了首次動畫,因此會觸發一次進場動畫。ci
//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); }
<TransitionGroup> 的經常使用屬性主要就2個,其它的有興趣能夠去官網看看 👀
default 'div' 也就是TransitionGroup渲染出來的標籤爲div,也能夠就行更改,例如component="span" 渲染出來的就是span標籤了
type: any
default: 'div'
至關於你給的組件,能夠是字符串或者自定義組件等。
type: any