导语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 ), })); }}> × </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.jsimport 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个，其它的有兴趣可以去官网看看 ????componentdefault ‘div’ 也就是TransitionGroup渲染出来的标签为div，也可以就行更改，例如component=“span” 渲染出来的就是span标签了type: anydefault: ‘div’children相当于你给的组件，可以是字符串或者自定义组件等。type: any