ant-design-vue/components/vc-calendar/assets/index/Picker.less

.@{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);
      }
    }
  }
}