vue3页面切换特效

### 如何在 Vue3 中实现页面切换动画效果

#### 利用 `<Transition>` 组件与 `mode` 属性
为了创建页面切换动画，在Vue 3中可以利用内置的`<Transition>`组件。此组件允许定义CSS类名来控制元素进入和离开时的状态变化[^1]。

<template>
  <transition name="page" mode="out-in">
    <router-view />
  </transition>
</template>

<style scoped>
.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s ease;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>

上述代码展示了如何设置基本的淡入淡出效果，其中`mode="out-in"`确保旧的内容完全消失之后新的内容才开始显现出来。

#### 结合 JavaScript 钩子函数增强交互体验
对于更为复杂的需求，则可以通过引入JavaScript库如Velocity.js，并借助于`@enter`、`@afterEnter`等事件钩子来进行更细致的操作[^2]：

import Velocity from 'velocity-animate';

export default {
  methods: {
    beforeLeave(el) {
      el.style.opacity = 1;
      Velocity(
        el,
        { translateX: '-10px', rotateZ: "-90deg", scale: "0.8"},
        { duration: 600 }
      );
    },
    enter(el, done) {
      let delay = parseInt(Math.random() * 70 + 40);
      setTimeout(() => {
          Velocity(
            el,
            { translateX: ['0%', '0%'], rotateZ: ["0deg","0deg"], scale:"1"}, 
            { complete: done }
          )
      }, delay && delay !== 0 ? delay : 0)
    }
  }
};

这段脚本实现了当新视图进来时会有随机延迟时间以及旋转缩放的效果；而旧视图出去则会向左侧移动并缩小。

#### 动态调整过渡名称以适应不同场景需求
如果想要根据不同条件改变转场方式——比如基于导航方向来做左右滑动的话，可以在路由配置里加入相应的逻辑处理[^4]:

watch: {
  '$route'(to, from){
    const pagesOrder=['/home','/about','/contact'];
    this.transitionName=pagesOrder.indexOf(to.path)>pagesOrder.indexOf(from.path)?
                      'slide-left':'slide-right';
  }
},
data(){
  return{
    transitionName:''
  };
}

这里通过观察器监控路由变动情况，并据此更新`this.transitionName`变量值，进而影响到实际应用中的具体表现形式。

#### 添加初次加载时的动画支持
为了让首屏展示也具备良好的视觉反馈，还可以考虑给`<Transition>`标签添加`appear`特性，这样即使是在第一次渲染期间也能触发对应的动画过程[^5]。

<transition appear name="initial-load">
  <!-- Your content here -->
</transition>

---