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

TDesign Component for React

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

.@{prefix}-drawer-fade-enter,
.@{prefix}-drawer-fade-appear {
  opacity: 0;
  animation-duration: @drawer-default-duration;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-play-state: paused;
}

.@{prefix}-drawer-fade-exit {
  animation-duration: @drawer-default-duration;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-play-state: paused;
}

.@{prefix}-drawer-fade-enter.@{prefix}-drawer-fade-enter-active,
.@{prefix}-drawer-fade-enter.@{prefix}-drawer-fade-enter-active.@{prefix}-drawer-fade-enter-to,
.@{prefix}-drawer-fade-appear.@{prefix}-drawer-fade-appear-active,
.@{prefix}-drawer-fade-appear.@{prefix}-drawer-fade-appear-active.@{prefix}-drawer-fade-appear-to {
  animation-name: tDrawerFadeIn;
  animation-duration: @anim-duration-base;
  animation-play-state: running;
}

.@{prefix}-drawer-fade-exit.@{prefix}-drawer-fade-exit-active,
.@{prefix}-drawer-fade-leave-active.@{prefix}-drawer-fade-leave-to {
  animation-name: tDrawerFadeOut;
  animation-duration: @anim-duration-base;
  animation-play-state: running;
}

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

  100% {
    opacity: 1;
  }
}

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

  100% {
    opacity: 0;
  }
}