css3动画

.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 包裹