.@{prefixClass} { &-picker { .effect() { animation-duration: 0.3s; animation-fill-mode: both; transform-origin: 0 0; display: block !important; } &-slide-up-enter { .effect(); opacity: 0; animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-play-state: paused; } &-slide-up-appear { .effect(); opacity: 0; animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); animation-play-state: paused; } &-slide-up-leave { .effect(); opacity: 1; animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); animation-play-state: paused; } &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft, &-slide-up-enter&-slide-up-enter-active&-placement-bottomRight, &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft, &-slide-up-appear&-slide-up-appear-active&-placement-bottomRight { animation-name: rcDropdownSlideUpIn; animation-play-state: running; } &-slide-up-enter&-slide-up-enter-active&-placement-topLeft, &-slide-up-enter&-slide-up-enter-active&-placement-topRight, &-slide-up-appear&-slide-up-appear-active&-placement-topLeft, &-slide-up-appear&-slide-up-appear-active&-placement-topRight { animation-name: rcDropdownSlideDownIn; animation-play-state: running; } &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft, &-slide-up-leave&-slide-up-leave-active&-placement-bottomRight { animation-name: rcDropdownSlideUpOut; animation-play-state: running; } &-slide-up-leave&-slide-up-leave-active&-placement-topLeft, &-slide-up-leave&-slide-up-leave-active&-placement-topRight { animation-name: rcDropdownSlideDownOut; animation-play-state: running; } @keyframes rcDropdownSlideUpIn { 0% { opacity: 0; transform-origin: 0% 0%; transform: scaleY(0); } 100% { opacity: 1; transform-origin: 0% 0%; transform: scaleY(1); } } @keyframes rcDropdownSlideUpOut { 0% { opacity: 1; transform-origin: 0% 0%; transform: scaleY(1); } 100% { opacity: 0; transform-origin: 0% 0%; transform: scaleY(0); } } @keyframes rcDropdownSlideDownIn { 0% { opacity: 0; transform-origin: 100% 100%; transform: scaleY(0); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scaleY(1); } } @keyframes rcDropdownSlideDownOut { 0% { opacity: 1; transform-origin: 100% 100%; transform: scaleY(1); } 100% { opacity: 0; transform-origin: 100% 100%; transform: scaleY(0); } } } }