react学习笔记-过渡动画（5） react学习笔记-过渡动画（5）

4-11、React中实现css过渡动画

handleToggle () { this.setState({ show: this.state.show ? false : true }) } hello world style.css .show{ opacity: 1; transition: all 1s ease-in; } .hide{ opacity: 0; transition: all 1s ease-in; }

4-12、React中实现css动画效果

.show{ animation: show-item 2s ease-in forwards; } .hide{ animation: hide-item 2s ease-in forwards; } @keyframes show-item{ 0% { opacity: 0; color: red; } 50% { opacity: .5; color: green; } 100% { opacity: 1; color: blue; } }@keyframes hide-item{ 0% { opacity: 1; color: red; } 50% { opacity: .5; color: green; } 100% { opacity: 0; color: blue; } }

4-13、使用react-transition-group实现动画（1）
【react学习笔记-过渡动画（5）】https://github.com/reactjs/react-transition-group

npm install react-transition-group --save // 安装插件

import { CSSTransition } from 'react-transition-group' {el.style.color = 'blue'}} {/* 初始化时钩子 */} appear={true} {/* 初始化时执行动画，需要添加.fade-appear及.fade-appear-active类 */} >CSSTransition

style.css

.fade-enter, .fade-appear { opacity: 0; } .fade-enter-active, .fade-appear-active { opacity: 1; transition: all 1s ease-in; } .fade-enter-done { opacity: 1; } .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0; transition: all 1s ease-in; } .fade-exit-done { opacity: 0; }

4-14、使用react-transition-group实现动画（2）

import { CSSTransition,TransitionGroup } from 'react-transition-group' handleToggle () { this.setState((prevState) => { return { show: this.state.show ? false : true, list: [...prevState.list,'item'] } }) } { this.state.list.map((item,index) => { return ( {el.style.color = 'blue'}} appear={true} key={index} > TransitionGroup ) }) }