.fade-enter { opacity: 0; .motion-common(); animation-timing-function: @ease-out; animation-play-state: paused; } .fade-leave { .motion-common(); animation-timing-function: @ease-in; animation-play-state: paused; } .fade-enter.fade-enter-active { animation-name: fadeIn; animation-play-state: running; } .fade-leave.fade-leave-active { animation-name: fadeOut; animation-play-state: running; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }