tdesign-react/esm/common/style/web/components/dialog/_animate.less

TDesign Component for React

@import "../../base.less";

.@{prefix}-dialog-zoom {

  @keyframes tDialogZoomIn {
    // 解决弹窗中带有动效的Icon不展示（如loading），初始scale为1可以展示正常
    0% {
      opacity: 0;
      transform: scale(.01);
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes tDialogZoomOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
      transform: scale(.01);
    }
  }

  @keyframes tDialogMaskIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes tDialogMaskOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .animation-enter {
    animation-duration: @dialog-anim-duration;
    animation-fill-mode: both;
    animation-timing-function: @anim-time-fn-ease-out;
    animation-play-state: paused;
  }

  .animation-exit {
    animation-duration: @dialog-anim-duration;
    animation-fill-mode: both;
    animation-timing-function: @dialog-anim-time-fn-exit;
    animation-play-state: paused;
  }

  .animation-active {
    animation-play-state: running;
    animation-fill-mode: both;
  }

  &-enter,
  &-enter-from,
  &-appear {
    .animation-enter;
  }

  &-exit {
    .animation-exit;
  }

  &-enter-active,
  &-appear-active {
    animation-name: tDialogZoomIn;
    .animation-active;
  }

  &-exit-active {
    animation-name: tDialogZoomOut;
    .animation-active;
  }

  &__vue {
    &-enter-active {

      .@{prefix}-dialog {
        animation-name: tDialogZoomIn;
        .animation-enter;
      }

      .@{prefix}-dialog__mask {
        animation-name: tDialogMaskIn;
        animation-duration: @dialog-anim-duration;
        animation-timing-function: linear;
        .animation-active;
      }
    }

    &-leave-active {

      .@{prefix}-dialog {
        animation-name: tDialogZoomOut;
        .animation-exit;
      }

      .@{prefix}-dialog__mask {
        animation-name: tDialogMaskOut;
        animation-duration: @dialog-anim-duration;
        animation-timing-function: linear;
        .animation-active;
      }
    }

    &-enter-to {

      .@{prefix}-dialog {
        .animation-active;
      }
    }

    &-leave-to {

      .@{prefix}-dialog {
        .animation-active;
      }
    }
  }
}

.@{prefix}-dialog-fade-enter,
.@{prefix}-dialog-fade-appear {
  opacity: 0;
  animation-duration: @dialog-anim-duration;
  animation-fill-mode: both;
  animation-timing-function: @anim-time-fn-ease-out;
  animation-play-state: paused;
}

.@{prefix}-dialog-fade-exit {
  animation-duration: @dialog-anim-duration;
  animation-fill-mode: both;
  animation-timing-function: @anim-time-fn-ease-out;
  animation-play-state: paused;
}

.@{prefix}-dialog-fade-enter.@{prefix}-dialog-fade-enter-active,
.@{prefix}-dialog-fade-appear.@{prefix}-dialog-fade-appear-active {
  animation-name: tDialogFadeIn;
  animation-play-state: running;
}

.@{prefix}-dialog-fade-exit.@{prefix}-dialog-fade-exit-active {
  animation-name: tDialogFadeOut;
  animation-play-state: running;
}

@keyframes tDialogFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes tDialogFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}