enhance(frontend): disable router view transition

Fix #15723

1 files changed, 2 insertions, 44 deletions

diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue
index 78ac6900a3..27f7b18559 100644
--- a/packages/frontend/src/components/global/RouterView.vue
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div ref="rootEl" class="_pageContainer" :class="$style.root">
+<div class="_pageContainer" :class="$style.root">
 	<KeepAlive :max="prefer.s.numberOfPageCache">
 		<Suspense :timeout="0">
 			<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
@@ -42,37 +42,6 @@ provide(DI.viewId, viewId);
 const currentDepth = inject(DI.routerCurrentDepth, 0);
 provide(DI.routerCurrentDepth, currentDepth + 1);
 
-const rootEl = useTemplateRef('rootEl');
-onMounted(() => {
-	if (prefer.s.animation) {
-		rootEl.value.style.viewTransitionName = viewId; // view-transition-nameにcss varが使えないっぽいため直接代入
-	}
-});
-
-// view-transition-newなどの<pt-name-selector>にはcss varが使えず、v-bindできないため直接スタイルを生成
-const viewTransitionStylesTag = window.document.createElement('style');
-viewTransitionStylesTag.textContent = `
-@keyframes ${viewId}-old {
-	to { transform: scale(0.95); opacity: 0; }
-}
-
-@keyframes ${viewId}-new {
-	from { transform: scale(0.95); opacity: 0; }
-}
-
-::view-transition-old(${viewId}) {
-	animation-duration: 0.2s;
-  animation-name: ${viewId}-old;
-}
-
-::view-transition-new(${viewId}) {
-	animation-duration: 0.2s;
-  animation-name: ${viewId}-new;
-}
-`;
-
-window.document.head.appendChild(viewTransitionStylesTag);
-
 const current = router.current!;
 const currentPageComponent = shallowRef('component' in current.route ? current.route.component : MkLoadingPage);
 const currentPageProps = ref(current.props);
@@ -90,18 +59,7 @@ router.useListener('change', ({ resolved }) => {
 		currentRoutePath = resolved.route.path;
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-	if (prefer.s.animation && window.document.startViewTransition) {
-		window.document.startViewTransition(() => new Promise((res) => {
-			_();
-			nextTick(() => {
-				res();
-				//setTimeout(res, 100);
-			});
-		}));
-	} else {
-		_();
-	}
+	_();
 });
 </script>