实现React Transition Css动画效果 首先在项目工程中引入react-transition-group：
npm install react-transition-group --save-dev
然后在组件中引入CSSTransition:
//示例也讲解TransitionGroup ，在这里一并引入
import { CSSTransition, TransitionGroup } from 'react-transition-group';
一下是演示组件代码：
import React, { Component } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { Button } from 'antd';
import '../componentStyle/CssTransition.css';
// css动画，可以根据className的变化来实现动画效果；
class CssTransition extends Component {
constructor(props) {
super(props);
this.state = {
show: true,
list:[]
}
}
//执行动画
handleToggole = () => {
// this.setState((prevState)=>{
// return{
// list: [...prevState.list, 'item']
// }
// })
this.setState({
show: !this.state.show
})
}
handleAddItem=()=>{
this.setState((prevState) => {
console.log(prevState);
return {
list: [...prevState.list, 'item']
}
})
}
render() {
return (
<div>
{/* 一个动画 */}
<CSSTransition
in={this.state.show} //控制动画是否入场，boolean值为true时，动画进场，boolean为false时动画出场
timeout={1000} //动画执行时间
classNames="fade" //自定义的类名（定义动画效果，进场前，进场后直到结束，结束前，结束后）
unmountOnExit //可选属性，当动画出场后，在页面上移除包裹的节点
onEnter={(el) => {
el.style.color = 'blue' //可选属性，动画进场后的回调，el指被包裹的dom
}}
onExited={() => {
//出场后的回调，可以在吃操作setSate操作
}}
>
<div>玩转React Transition</div>
</CSSTransition>
<Button type="primary" onClick={this.handleToggole}>Animation</Button>
{/* 一组动画 */}
<TransitionGroup>
{
this.state.list.map((item, index) => {
return (
<CSSTransition
timeout={1000}
classNames='fade'
unmountOnExit
onEntered={(el) => { el.style.color = 'blue' }}
appear={true}
key={index}
>
<div>{item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
<Button onClick={this.handleAddItem}>AddItem</Button>
</div>
)
}
}
export default CssTransition;
到这里，还要配置一下执行动画效果的css文件
/* enter是入场前的刹那（点击按钮），appear指页面第一次加载前的一刹那（自动） */
.fade-enter, .fade-appear {
opacity: 0;
}
/* //enter-active指入场后到入场结束的过程，appear-active则是页面第一次加载自动执行 */
.fade-enter-active, .fade-appear-active {
opacity: 1;
transition: opacity 1s ease-in;
}
/* //入场动画执行完毕后，保持状态 */
.fade-enter-done {
opacity: 1;
}
/* //同理，出场前的一刹那，以下就不详细解释了，一样的道理 */
.fade-exit {
opacity: 1;
} .fade-exit-active {
opacity: 0;
transition: opacity 1s ease-in;
} .fade-exit-done {
opacity: 0;
}
到这里，就实现了一个动画的显示和隐藏功能，以及增加节点的动画效果演示了，这里是个人笔记，也希望对你有一定的帮助，下篇再见！