.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;
}
}
forward代表保存最后一个样式
import { CSSTransition } from 'react-transition-group';
<CSSTransition
in={showValidationMessage}
timeout={300}
classNames="message"
unmountOnExit
onExited={() => {
this.setState({
showValidationButton: true,
});
}}
>
.fade-enter{
opacity: 0;
}
.fade-enter-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;
}
出场动画
<TransitionGroup>
{
this.state.list.map((item,index)=>{
return(
<CSSTransition
in={this.state.show}
timeout={500}
classNames='fade'
unmountOnExit
onEntered={(el)=>{el.style.color='blue'}}
appear={true}
key={index}
>
<div>{item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
多个元素动画外层用
TransitionGroup
包裹,每一个用CSSTransition
包裹