过渡动画 && 动画 && react-transitio
2019-07-13 本文已影响0人
coffee1949
/* 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 */
