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 ($name: 'slide-in-from-right', $duration: .3s, $leave-duration: .2s) {
  &.#{$namespace}-#{$name}-transition-leave-active {
    transition: transform $leave-duration $--n-ease-in-cubic-bezier;
  }
  &.#{$namespace}-#{$name}-transition-enter-active {
    transition: transform $duration $--n-ease-out-cubic-bezier;
  }
  &.#{$namespace}-#{$name}-transition-enter-to {
    transform: translateX(0);
  }
  &.#{$namespace}-#{$name}-transition-enter {
    transform: translateX(100%);
  }
  &.#{$namespace}-#{$name}-transition-leave {
    transform: translateX(0);
  }
  &.#{$namespace}-#{$name}-transition-leave-to {
    transform: translateX(100%);
  }
}

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

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

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

@mixin fade-in-height-expand-transition (
  $name: 'fade-in-height-expand',
  $duration: .3s,
  $original-transition: (),
  $leave-delay: 0s,
  $fold-padding: false
) {
  &.#{$namespace}-#{$name}-transition-leave, &.#{$namespace}-#{$name}-transition-enter-to {
    opacity: 1;
  }
  &.#{$namespace}-#{$name}-transition-leave-to, &.#{$namespace}-#{$name}-transition-enter {
    opacity: 0;
    @if $fold-padding {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  &.#{$namespace}-#{$name}-transition-leave-active {
    overflow: hidden;
    transition:
      max-height $duration $--n-ease-in-out-cubic-bezier $leave-delay,
      opacity $duration $--n-ease-out-cubic-bezier $leave-delay,
      margin-top $duration $--n-ease-in-out-cubic-bezier $leave-delay,
      margin-bottom $duration $--n-ease-in-out-cubic-bezier $leave-delay,
      padding-top $duration $--n-ease-in-out-cubic-bezier $leave-delay,
      padding-bottom $duration $--n-ease-in-out-cubic-bezier $leave-delay,
      $original-transition;
  }
  &.#{$namespace}-#{$name}-transition-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,
      padding-top $duration $--n-ease-in-out-cubic-bezier,
      padding-bottom $duration $--n-ease-in-out-cubic-bezier,
      $original-transition;
  }
}

@mixin fade-in-width-expand-transition ($name: 'fade-in-width-expand', $duration: .2s, $delay: .1s) {
  &.#{$namespace}-#{$name}-transition-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}-transition-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}-transition-enter-to {
    opacity: 1;
  }
  &.#{$namespace}-#{$name}-transition-enter {
    max-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    opacity: 0!important;
  }
  &.#{$namespace}-#{$name}-transition-leave {
    opacity: 1;
  }
  &.#{$namespace}-#{$name}-transition-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}-transition-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}-transition-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}-transition-enter-to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
  &.#{$namespace}-#{$name}-transition-enter {
    max-width: 0!important;
    opacity: 0;
    transform: translateY(60%);
  }
  &.#{$namespace}-#{$name}-transition-leave {
    opacity: 1;
    transform: translateY(0);
  }
  &.#{$namespace}-#{$name}-transition-leave-to {
    max-width: 0!important;
    opacity: 0!important;
    transform: translateY(60%);
  }
}

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