ant-design-vue/es/vc-dialog/assets/bootstrap/effect.less

An enterprise-class UI design language and Vue-based implementation

.@{prefixCls} {
  &-slide-fade-enter,
  &-slide-fade-appear {
    transform: translate(0, -25%);
  }

  &-slide-fade-enter,
  &-slide-fade-appear,
  &-slide-fade-leave {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
    animation-play-state: paused;
  }

  &-slide-fade-enter&-slide-fade-enter-active,
  &-slide-fade-appear&-slide-fade-appear-active {
    animation-name: rcDialogSlideFadeIn;
    animation-play-state: running;
  }

  &-slide-fade-leave&-slide-fade-leave-active {
    animation-name: rcDialogSlideFadeOut;
    animation-play-state: running;
  }

  @keyframes rcDialogSlideFadeIn {
    0% {
      transform: translate(0, -25%);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  @keyframes rcDialogSlideFadeOut {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(0, -25%);
    }
  }
}