实现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; }
到这里,就实现了一个动画的显示和隐藏功能,以及增加节点的动画效果演示了,这里是个人笔记,也希望对你有一定的帮助,下篇再见!