FastapiAdmin/frontend/web/src/styles/core/router-transition.scss

@use "sass:map";

// === 变量区域 ===
$transition: (
  // 动画持续时间
  duration: 0.25s,
  // 滑动动画的移动距离
  distance: 15px,
  // 默认缓动函数
  easing: cubic-bezier(0.25, 0.1, 0.25, 1),
  // 淡入淡出专用的缓动函数
  fade-easing: cubic-bezier(0.4, 0, 0.6, 1)
);

// 抽取配置值函数，提高可复用性
@function transition-config($key) {
  @return map.get($transition, $key);
}

// 变量简写
$duration: transition-config("duration");
$distance: transition-config("distance");
$easing: transition-config("easing");
$fade-easing: transition-config("fade-easing");

// === 动画类 ===

// 淡入淡出动画
.fade {
  &-enter-active,
  &-leave-active {
    transition: opacity $duration $fade-easing;
    will-change: opacity;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
  }

  &-enter-to,
  &-leave-from {
    opacity: 1;
  }
}

// 滑动动画通用样式
@mixin slide-transition($direction) {
  $distance-x: 0;
  $distance-y: 0;

  @if $direction == "left" {
    $distance-x: -$distance;
  } @else if $direction == "right" {
    $distance-x: $distance;
  } @else if $direction == "top" {
    $distance-y: -$distance;
  } @else if $direction == "bottom" {
    $distance-y: $distance;
  }

  &-enter-active {
    transition:
      opacity $duration $easing,
      transform $duration $easing;
    will-change: opacity, transform;
  }

  &-leave-active {
    transition:
      opacity calc($duration * 0.7) $easing,
      transform calc($duration * 0.7) $easing;
    will-change: opacity, transform;
  }

  &-enter-from {
    opacity: 0;
    transform: translate3d($distance-x, $distance-y, 0);
  }

  &-enter-to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  &-leave-to {
    opacity: 0;
    transform: translate3d(-$distance-x, -$distance-y, 0);
  }
}

// 滑动动画方向类
.slide-left {
  @include slide-transition("left");
}

.slide-right {
  @include slide-transition("right");
}

.slide-top {
  @include slide-transition("top");
}

.slide-bottom {
  @include slide-transition("bottom");
}