react react-transition-group实现动画
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;
}