Angular 5 带条件的步骤导航页面浏览动画实现问询

Hey there! 看你的需求是要做一个6步的线性导航（比如结账→登录/注册→发货→支付设置这类），支持自由跳转还得匹配对应逻辑的动画对吧？刚好我之前做过类似的结账流程，结合你提到的路由过渡思路，给你整理了一套落地方案：

核心思路 #

普通路由动画只会根据路由历史判断前进后退，但咱们的需求是严格绑定业务步骤顺序——哪怕用户跨跳3步，动画也要对应"跳回前面步骤"或者"直接跳到后面步骤"的逻辑。所以核心是：用步骤索引代替路由历史来控制动画方向，而不是单纯依赖路由的前进/后退记录。

1. 先把步骤配置和状态捋清楚 #

首先咱们把所有步骤的路由、名称、顺序索引存成一个固定配置，顺序必须和业务流程完全一致：

// 步骤配置表，顺序严格对应你的业务流程
const stepRoutes = [
  { path: '/checkout', name: '结账', index: 0 },
  { path: '/auth', name: '登录/注册', index: 1 },
  { path: '/shipping', name: '发货信息', index: 2 },
  { path: '/payment', name: '支付设置', index: 3 },
  { path: '/review', name: '订单确认', index: 4 },
  { path: '/complete', name: '完成', index: 5 }
];

然后用状态管理工具（比如Pinia或者Vuex）存一下上一步的索引——这样每次跳转时，就能对比当前步骤和上一步的索引，判断该用什么动画。

2. 自定义路由过渡动画（匹配步骤逻辑） #

参考你提到的路由过渡代码，咱们修改过渡类名的逻辑，完全基于步骤索引的变化来决定动画：

• 目标步骤索引 > 当前索引：用前进动画（比如新页面从右侧滑入）
• 目标步骤索引 < 当前索引：用后退动画（比如新页面从左侧滑入）
• 跨多步跳转的话，可以加个特殊动画（比如淡入淡出/缩放）

直接上可复用的代码（以Vue3为例）：

<template>
  <!-- 绑定动态过渡名称 -->
  <transition :name="transitionName">
    <router-view />
  </transition>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'pinia';

const route = useRoute();
const router = useRouter();
const store = useStore();

// 根据步骤索引变化计算过渡动画名称
const transitionName = computed(() => {
  // 找到当前路由对应的步骤索引
  const currentStep = stepRoutes.find(item => item.path === route.path)?.index;
  // 从状态管理中取上一步的索引
  const prevStep = store.state.prevStepIndex;

  // 初始化或者找不到索引时用淡入淡出
  if (currentStep === undefined || prevStep === undefined) return 'fade';

  // 判断动画方向
  const stepDiff = Math.abs(currentStep - prevStep);
  if (stepDiff > 1) {
    return 'zoom'; // 跨多步跳转用缩放动画
  } else if (currentStep > prevStep) {
    return 'slide-left'; // 前进：新页面从右往左滑入
  } else if (currentStep < prevStep) {
    return 'slide-right'; // 后退：新页面从左往右滑入
  }
  return 'fade'; // 同一页面刷新
});

// 路由跳转前，记录当前步骤的索引到状态管理
router.beforeEach((to, from) => {
  const fromStep = stepRoutes.find(item => item.path === from.path)?.index;
  if (fromStep !== undefined) {
    store.commit('setPrevStepIndex', fromStep);
  }
});
</script>

<style scoped>
/* 前进动画 */
.slide-left-enter-active, .slide-left-leave-active {
  transition: all 0.3s ease;
}
.slide-left-enter-from {
  transform: translateX(100%);
}
.slide-left-leave-to {
  transform: translateX(-100%);
}

/* 后退动画 */
.slide-right-enter-active, .slide-right-leave-active {
  transition: all 0.3s ease;
}
.slide-right-enter-from {
  transform: translateX(-100%);
}
.slide-right-leave-to {
  transform: translateX(100%);
}

/* 跨多步缩放动画 */
.zoom-enter-active, .zoom-leave-active {
  transition: all 0.3s ease;
}
.zoom-enter-from {
  transform: scale(0.9);
  opacity: 0;
}
.zoom-leave-to {
  transform: scale(1.1);
  opacity: 0;
}

/* 默认淡入淡出 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

3. 实现可自由跳转的导航菜单 #

导航菜单要支持点击任意步骤跳转，同时高亮当前步骤，代码很简单：

<template>
  <div class="step-nav">
    <div 
      v-for="step in stepRoutes" 
      :key="step.path"
      class="step-item"
      :class="{ active: step.path === $route.path }"
      @click="goToStep(step)"
    >
      <span class="step-number">{{ step.index + 1 }}</span>
      <span class="step-name">{{ step.name }}</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

// 跳转到指定步骤
const goToStep = (step) => {
  router.push(step.path);
};
</script>

<style scoped>
.step-nav {
  display: flex;
  gap: 2rem;
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
  justify-content: center;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s ease;
}
.step-item:hover {
  color: #2c3e50;
}
.step-item.active {
  color: #2c3e50;
}
.step-number {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 2px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.step-item.active .step-number {
  border-color: #2c3e50;
  background-color: #2c3e50;
  color: white;
}
.step-name {
  font-size: 0.9rem;
  text-align: center;
}
</style>

关键注意事项 #

• 步骤顺序绝对不能乱：stepRoutes的顺序必须和你的业务流程完全一致，索引是动画逻辑的核心，错一步整个动画就乱了。
• 刷新页面的状态恢复：如果用户刷新页面，要从当前路由对应的步骤索引初始化状态管理里的prevStepIndex，避免动画异常。
• 动画性能优化：尽量用transform和opacity做动画，这两个属性是浏览器的合成层属性，不会触发重排重绘，动画更流畅。

内容的提问来源于stack exchange，提问作者tatsu