fix iOS back transition
This commit is contained in:
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user