首页vue3中实现transition的页面切换

vue3中实现transition的页面切换

时间: 2025-01-10 14:17:08 浏览: 30

### 如何在 Vue3 中使用 `transition` 组件实现页面切换的过渡动画 #### 定义过渡类名为了确保页面切换时具有完整的进入和离开动画，在定义 `<transition>` 组件时应明确指定所有必要的 CSS 类名。对于进入动画，除了默认提供的 `.v-enter-active` 和 `.v-enter` 外，还需要特别指明 `.v-enter-from` 类以便控制初始样式[^1]。 ```css .v-enter-from { opacity: 0; } .v-enter-active { transition: all 0.5s ease-out; } .v-enter-to { opacity: 1; } /* 离开动画 */ .v-leave-from { opacity: 1; } .v-leave-active { transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .v-leave-to { opacity: 0; } ``` #### 应用 Transition 组件当构建路由视图或动态组件时，可以包裹一层 `<transition>` 来启用这些自定义样式的过渡效果： ```html <template> <div id="app">  <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </div> </template> <script setup lang="ts"> // 此处省略其他逻辑代码... </script> ``` 上述例子中的 `mode="out-in"` 参数表示先完成当前页面元素的退出动画后再执行新页面元素的进入动画，从而避免两者重叠显示的情况发生[^2]。 #### 解决仅部分动画生效的问题如果遇到仅有离开动画正常工作而进入动画失效的情形，可能是由于缺少了特定于进入阶段的关键帧声明——即`.v-enter-from` 或者对应的钩子函数未被触发。因此建议总是显式地设置好这两个状态下的样式规则以保证预期行为的一致性[^3]。

阅读全文