fix iOS back transition

This commit is contained in:
Timi
2026-04-14 15:47:03 +08:00
parent 42efa2b370
commit 11c1199449
5 changed files with 74 additions and 13 deletions

View File

@@ -14,6 +14,7 @@
import type { RouteLocationNormalized } from "vue-router";
import { viewDepthKey } from "vue-router";
import { useGlobalUIStore } from "@/store/globalUIStore";
import { hasProgrammaticBackNavigation } from "@/utils/backNavigationSignal";
defineOptions({
name: "PageTransition"
@@ -26,6 +27,8 @@ const viewDepth = inject(viewDepthKey, 0);
const transitionName = ref("");
const hasTransition = ref(false);
// iOS 左滑返回由系统接管,页面侧不应叠加离场动画。
const isIOS = /iP(ad|hone|od)/i.test(window.navigator.userAgent);
const pageBackground = computed(() => globalUIStore.bodyBackground);
const currentDepth = computed(() => Number(unref(viewDepth)));
const pageKey = computed(() => {
@@ -72,6 +75,17 @@ const unregisterGuard = router.beforeEach((to, from) => {
const toDepth = calcDepth(to);
const fromDepth = calcDepth(from);
const isBackwardNavigation = toDepth < fromDepth;
// 主动触发的返回(如导航栏返回)保留动画。
const isProgrammaticBack = hasProgrammaticBackNavigation();
// 仅在 iOS 系统返回手势下关闭动画。
const shouldDisableTransition = isIOS && isBackwardNavigation && !isProgrammaticBack;
if (shouldDisableTransition) {
transitionName.value = "";
hasTransition.value = false;
return;
}
if (fromDepth < toDepth) {
transitionName.value = "push-left";