前言
TransitionGroup 的作用，博主用通俗易懂的话来讲就是一个一组元素添加动画，在我们的实际开发当中有时可能会有这么一个需求就是，在一个页面上，有添加和删除，在做这些操作的时候需要都带上动画，那么这个时候就可以使用 TransitionGroup 来快速实现。
案例
App.js:
import React from 'react'; import './App.css' import {CSSTransition, TransitionGroup} from 'react-transition-group'; class App extends React.Component { constructor(props) { super(props); this.state = { heroList: [ {id: 1, name: '鲁班'}, {id: 2, name: '虞姬'}, {id: 3, name: '黄忠'}, ] } } render() { return ( <div> <ul> <TransitionGroup> { this.state.heroList.map((obj, index) => { return ( <CSSTransition key={obj.id} timeout={3000} classNames={'item'} > <li onClick={() => { this.removeHero(index) }} > {obj.name} </li> </CSSTransition> ) }) } </TransitionGroup> </ul> <button onClick={() => { this.btnClick() }} > 新增 </button> </div> ); } btnClick() { this.setState({ heroList: [...this.state.heroList, {id: this.state.heroList.length + 1, name: '阿珂'}] }) } removeHero(index) { const list = this.state.heroList.filter((idx) => { return idx !== index; }) this.setState({ heroList: list }) } } export default App;
App.css:
.item-enter { /* 进入动画执行之前绑定的类名 */ opacity: 0; transform: translateX(100%); } .item-enter-active { /* 进入动画执行过程中绑定的类名 */ opacity: 1; transform: translateX(0); transition: all 3s; } .item-enter-done { /* 进入动画执行完毕之后绑定的类名 */ } .item-exit { /* 退出动画执行之前绑定的类名 */ opacity: 1; transform: translateX(0); } .item-exit-active { /* 退出动画执行过程中绑定的类名 */ opacity: 0; transform: translateX(100%); transition: all 3s; } .item-exit-done { /* 退出动画执行完毕之后绑定的类名 */ }
注意点
- 在企业开发中一定要保证
CSSTransition key的唯一性，否则动画会失效 - TransitionGroup 与 CSSTransition 是紧贴的，中间不能包含其它元素，否则动画则不会生效
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
