过渡动画 && 动画 && react-transitio

/* 1.过渡动画 */
.show{
    opacity: 1;
    transition: opacity 1s ease-in;
}
.hide{
    opacity: 0;
    transition: opacity 1s ease;
}

/* 2.animation动画 */
.show {
    animation: show 1s ease forwards;
}
.hide {
    animation: hide 1s ease forwards;
}
@keyframes show{
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes hide{
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

/* 3.react-transition-group */

https://reactcommunity.org/react-transition-group/