naive-ui/styles/themes/transition.scss

@mixin fade-down-transition ($name: 'fade-down', $from-offset: -4px) {
  &.#{$namespace}-#{$name}-transition-enter, &.#{$namespace}-#{$name}-transition-leave-to {
    opacity: 0;
    transform: translateY($from-offset);
  }
  &.#{$namespace}-#{$name}-transition-enter-to, &.#{$namespace}-#{$name}-transition-leave {
    opacity: 1;
    transform: translateY(0);
  }
  &.#{$namespace}-#{$name}-transition-leave-active {
    transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
  }
  &.#{$namespace}-#{$name}-transition-enter-active {
    transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
  }
}

@mixin fade-in-scale-up-transition ($name: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: (), $original-transition: ()) {
  &.#{$namespace}-#{$name}-transition-leave-active {
    transform-origin: $origin;
    transition: opacity $duration $--n-ease-in-cubic-bezier, transform $duration $--n-ease-in-cubic-bezier, $original-transition;
  }
  &.#{$namespace}-#{$name}-transition-enter-active {
    transform-origin: $origin;
    transition: opacity $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier, $original-transition;
  }
  &.#{$namespace}-#{$name}-transition-enter, &.#{$namespace}-#{$name}-transition-leave-to {
    opacity: 0;
    transform: scale($start-scale) $original-transform;
  }
  &.#{$namespace}-#{$name}-transition-leave, &.#{$namespace}-#{$name}-transition-enter-to {
    opacity: 1; 
    transform: $--n-transform-debounce-scale $original-transform;
  }
}

@mixin fade-in-transition ($name: 'fade-in', $enter-duration: .2s, $leave-duration: .2s) {
  &.#{$namespace}-#{$name}-transition-enter-active {
    transition: all $enter-duration $--n-ease-in-out-cubic-bezier !important;
  }
  &.#{$namespace}-#{$name}-transition-leave-active {
    transition: all $leave-duration $--n-ease-in-out-cubic-bezier !important;
  }
  &.#{$namespace}-#{$name}-transition-enter,
  &.#{$namespace}-#{$name}-transition-leave-to {
    opacity: 0;
  }
  &.#{$namespace}-#{$name}-transition-enter-to,
  &.#{$namespace}-#{$name}-transition-leave {
    opacity: 1;
  }
}

@mixin slide-in-from-right-transition ($duration: .3s, $leave-duration: .2s) {
  &.#{$namespace}-slide-in-from-right-leave-active {
    transition: transform $leave-duration $--n-ease-in-cubic-bezier;
  }
  &.#{$namespace}-slide-in-from-right-enter-active {
    transition: transform $duration $--n-ease-out-cubic-bezier;
  }
  &.#{$namespace}-slide-in-from-right-enter-to {
    transform: translateX(0);
  }
  &.#{$namespace}-slide-in-from-right-enter {
    transform: translateX(100%);
  }
  &.#{$namespace}-slide-in-from-right-leave {
    transform: translateX(0);
  }
  &.#{$namespace}-slide-in-from-right-leave-to {
    transform: translateX(100%);
  }
}

@mixin slide-in-from-top-transition ($duration: .3s, $leave-duration: .2s) {
  &.#{$namespace}-slide-in-from-top-leave-active {
    transition: transform $leave-duration $--n-ease-in-cubic-bezier;
  }
  &.#{$namespace}-slide-in-from-top-enter-active {
    transition: transform $duration $--n-ease-out-cubic-bezier;
  }
  &.#{$namespace}-slide-in-from-top-enter-to {
    transform: translateY(0);
  }
  &.#{$namespace}-slide-in-from-top-enter {
    transform: translateY(-100%);
  }
  &.#{$namespace}-slide-in-from-top-leave {
    transform: translateY(0);
  }
  &.#{$namespace}-slide-in-from-top-leave-to {
    transform: translateY(-100%);
  }
}

@mixin slide-in-from-bottom-transition ($duration: .3s, $leave-duration: .2s) {
  &.#{$namespace}-slide-in-from-bottom-leave-active {
    transition: transform $leave-duration $--n-ease-in-cubic-bezier;
  }
  &.#{$namespace}-slide-in-from-bottom-enter-active {
    transition: transform $duration $--n-ease-out-cubic-bezier;
  }
  &.#{$namespace}-slide-in-from-bottom-enter-to {
    transform: translateY(0);
  }
  &.#{$namespace}-slide-in-from-bottom-enter {
    transform: translateY(100%);
  }
  &.#{$namespace}-slide-in-from-bottom-leave {
    transform: translateY(0);
  }
  &.#{$namespace}-slide-in-from-bottom-leave-to {
    transform: translateY(100%);
  }
}

@mixin slide-in-from-left-transition ($duration: .3s, $leave-duration: .2s) {
  &.#{$namespace}-slide-in-from-left-leave-active {
    transition: transform $duration $--n-ease-in-cubic-bezier;
  }
  &.#{$namespace}-slide-in-from-left-enter-active {
    transition: transform $duration $--n-ease-out-cubic-bezier;
  }
  &.#{$namespace}-slide-in-from-left-enter-to {
    transform: translateX(0);
  }
  &.#{$namespace}-slide-in-from-left-enter {
    transform: translateX(-100%);
  }
  &.#{$namespace}-slide-in-from-left-leave {
    transform: translateX(0);
  }
  &.#{$namespace}-slide-in-from-left-leave-to {
    transform: translateX(-100%);
  }
}

@mixin fade-in-height-expand-transition ($name: 'fade-in-height-expand', $duration: .3s, $delay: 0s) {
  &.#{$namespace}-#{$name}-leave, &.#{$namespace}-#{$name}-enter-to {
    opacity: 1;
  }
  &.#{$namespace}-#{$name}-leave-to, &.#{$namespace}-#{$name}-enter {
    opacity: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  &.#{$namespace}-#{$name}-leave-active {
    overflow: hidden;
    transition:
      max-height $duration $--n-ease-in-out-cubic-bezier,
      opacity $duration $--n-ease-out-cubic-bezier,
      margin-top $duration $--n-ease-in-out-cubic-bezier,
      margin-bottom $duration $--n-ease-in-out-cubic-bezier;
  }
  &.#{$namespace}-#{$name}-enter-active {
    overflow: hidden;
    transition: max-height $duration $--n-ease-in-out-cubic-bezier,
      opacity $duration $--n-ease-in-cubic-bezier,
      margin-top $duration $--n-ease-in-out-cubic-bezier,
      margin-bottom $duration $--n-ease-in-out-cubic-bezier;
  }
}

@mixin fade-in-width-expand-transition ($name: 'fade-in-width-expand', $duration: .2s, $delay: .1s) {
  &.#{$namespace}-#{$name}-leave-active {
    transition: opacity $duration $--n-ease-in-out-cubic-bezier, max-width $duration $--n-ease-in-out-cubic-bezier $delay,
      margin-left $duration $--n-ease-in-out-cubic-bezier $delay,
      margin-right $duration $--n-ease-in-out-cubic-bezier $delay;
  }
  &.#{$namespace}-#{$name}-enter-active {
    transition: opacity $duration $--n-ease-in-out-cubic-bezier $delay, max-width $duration $--n-ease-in-out-cubic-bezier,
      margin-left $duration $--n-ease-in-out-cubic-bezier,
      margin-right $duration $--n-ease-in-out-cubic-bezier;
  }
  &.#{$namespace}-#{$name}-enter-to {
    opacity: 1;
  }
  &.#{$namespace}-#{$name}-enter {
    max-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    opacity: 0!important;
  }
  &.#{$namespace}-#{$name}-leave {
    opacity: 1;
  }
  &.#{$namespace}-#{$name}-leave-to {
    max-width: 0 !important;
    opacity: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@mixin fade-up-width-expand-transition ($name: 'fade-up-width-expand', $duration: .2s) {
  &.#{$namespace}-#{$name}-leave-active {
    transition: opacity $duration $--n-ease-out-cubic-bezier, max-width $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier;
  }
  &.#{$namespace}-#{$name}-enter-active {
    transition: opacity $duration $--n-ease-out-cubic-bezier, max-width $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier;
  }
  &.#{$namespace}-#{$name}-enter-to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
  &.#{$namespace}-#{$name}-enter {
    max-width: 0!important;
    opacity: 0;
    transform: translateY(60%);
  }
  &.#{$namespace}-#{$name}-leave {
    opacity: 1;
    transform: translateY(0);
  }
  &.#{$namespace}-#{$name}-leave-to {
    max-width: 0!important;
    opacity: 0!important;
    transform: translateY(60%);
  }
}

@mixin icon-switch-transition ($original-transform: (), $left: 0, $top: 0) {
  &.n-icon-switch-enter, &.n-icon-switch-leave-to {
    /* make sure it apply to element */
    transform: $original-transform scale(.75);
    opacity: 0;
  }
  &.n-icon-switch-enter-to, &.n-icon-switch-leave {
    transform: $--n-transform-debounce-scale $original-transform;
    opacity: 1;
  }
  &.n-icon-switch-leave-active, &.n-icon-switch-enter-active {
    transform-origin: center;
    position: absolute;
    left: $left;
    top: $top;
    transition:
      all .3s cubic-bezier(.4, 0, .2, 1) !important;
  }
}