react react-transition-group实现动画-优快云博客

本文介绍了一个使用React和React Transition Group库实现元素过渡动画的示例。通过CSSTransition组件，可以为列表项的添加和移除操作添加优雅的淡入淡出效果。代码中展示了如何在状态变化时触发动画，并在动画结束时改变元素颜色。

import React,{ Component,Fragment } from 'react';
import './style.css';
import { CSSTransition,TransitionGroup } from 'react-transition-group';

class App extends Component{

　　constructor(props){
　　　　super(props);
　　　　his.state = {
　　　　　　show: true,
　　　　　　list:[1,2]
　　　　}
　　　　// this.handleToggle = this.handleToggle.bind(this)
　　　　this.handleAddItem = this.handleAddItem.bind(this)
　　}

　　render() {
　　　　return (
　　　　　　<Fragment>
　　　　　　　　{/*<CSSTransition
　　　　　　　　　　in={this.state.show}
　　　　　　　　　　timeout={1000}
　　　　　　　　　　classNames='fade'
　　　　　　　　　　unmountOnExit
　　　　　　　　　　onEntered={(el) => {
　　　　　　　　　　　　el.style.color="blue"
　　　　　　　　　　}}
　　　　　　　　　　appear={true}
　　　　　　　　>
　　　　　　　　　　<div>hello</div>
　　　　　　　　</CSSTransition>*/}
　　　　　　　　<TransitionGroup>
　　　　　　　　　　{
　　　　　　　　　　　　this.state.list.map((item,index)=>{
　　　　　　　　　　　　　　return (
　　　　　　　　　　　　　　　　<CSSTransition
　　　　　　　　　　　　　　　　　　key={ index }
　　　　　　　　　　　　　　　　　　timeout={1000}
　　　　　　　　　　　　　　　　　　classNames='fade'
　　　　　　　　　　　　　　　　　　unmountOnExit
　　　　　　　　　　　　　　　　　　onEntered={(el) => {
　　　　　　　　　　　　　　　　　　　　el.style.color="blue"
　　　　　　　　　　　　　　　　　　}}
　　　　　　　　　　　　　　　　>
　　　　　　　　　　　　　　　　　　<div >{ item }</div>
　　　　　　　　　　　　　　　　</CSSTransition>
　　　　　　　　　　　　　　)
　　　　　　　　　　　　})
　　　　　　　　　　}
　　　　　　　　</TransitionGroup>

　　　　　　　　{/*<div className={this.state.show?'show' : 'hide'}>hello</div>*/}
　　　　　　　　<button onClick={ this.handleAddItem }>toggle</button>
　　　　　　</Fragment>
　　　　)
　　}　　

　　// handleToggle() {
　　　　// this.setState({
　　　　　　// show: !this.state.show
　　　　// })
　　// }
　　handleAddItem(){
　　　　this.setState((prevState) => {
　　　　　　return {
　　　　　　　　list: [...prevState.list,'item']
　　　　　　}
　　　　})
　　}

}

export default App

style.css

.input{
border:1px dashed red;
}

/*.show{
opacity:1;
transition: all 1s ease-in;
}

.hide{
opacity:0;
transition: all 1s ease-in;
}*/

.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:0.5;
color:green;
}
100%{
opacity:1;
color:blue;
}
}

@keyframes hide-item{
0%{
opacity:1;
color:red;
}
50%{
opacity:0.5;
color:green;
}
100%{
opacity:0;
color:blue;
}
}

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