导语
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.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: anydefault: ‘div’
children
相当于你给的组件，可以是字符串或者自定义组件等。
type: any