From f40c5f27ddad294259edd9aba7cfc97d2e56fc40 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 14 Mar 2025 19:53:06 +0900
Subject: [PATCH] wip

---
 packages/frontend/src/components/MkNote.vue   |  7 ++-
 .../src/components/global/RouterView.vue      | 36 +++++++++++-
 packages/frontend/src/page.ts                 | 12 +++-
 packages/frontend/src/pages/note.vue          | 56 +++++++++----------
 4 files changed, 77 insertions(+), 34 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index a22ad346bf..c43cc8f1d5 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
 		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
-		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
+		<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock" :style="{ viewTransitionName: transitionName }"/>
 		<div :class="$style.main">
 			<MkNoteHeader :note="appearNote" :mini="true"/>
 			<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
@@ -223,6 +223,7 @@ import { focusPrev, focusNext } from '@/utility/focus.js';
 import { getAppearNote } from '@/utility/get-appear-note.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
+import { prepareViewTransition } from '@/page.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -235,6 +236,8 @@ const props = withDefaults(defineProps<{
 
 provide('mock', props.mock);
 
+const transitionName = prepareViewTransition('note-noteDetailed', props.note.id).avatar;
+
 const emit = defineEmits<{
 	(ev: 'reaction', emoji: string): void;
 	(ev: 'removeReaction', emoji: string): void;
@@ -852,6 +855,8 @@ function emitUpdReaction(emoji: string, delta: number) {
 	position: sticky !important;
 	top: calc(22px + var(--MI-stickyTop, 0px));
 	left: 0;
+
+	contain: paint;
 }
 
 .main {
diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue
index 0c21289a5c..299fcb5755 100644
--- a/packages/frontend/src/components/global/RouterView.vue
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:exclude="pageCacheController"
 >
 	<Suspense :timeout="0">
-		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)" :style="{ viewTransitionName: viewId }"/>
 
 		<template #fallback>
 			<MkLoading/>
@@ -41,7 +41,8 @@ if (router == null) {
 const currentDepth = inject(DI.routerCurrentDepth, 0);
 provide(DI.routerCurrentDepth, currentDepth + 1);
 
-provide(DI.viewId, uuid());
+const viewId = uuid();
+provide(DI.viewId, viewId);
 
 const viewTransitionId = ref(uuid());
 provide(DI.viewTransitionId, viewTransitionId);
@@ -70,10 +71,11 @@ async function onChange({ resolved, key: newKey }) {
 	if (current == null || 'redirect' in current.route) return;
 
 	viewTransitionId.value = uuid();
-	await new Promise(resolve => setTimeout(resolve, 100));
+	await nextTick();
 	nextTick(() => {
 		console.log('onChange', viewTransitionId.value);
 		document.startViewTransition(() => new Promise((res) => {
+			console.log('startViewTransition', viewTransitionId.value);
 			currentPageComponent.value = current.route.component;
 			currentPageProps.value = current.props;
 			key.value = newKey + JSON.stringify(Object.fromEntries(current.props));
@@ -117,3 +119,31 @@ onBeforeUnmount(() => {
 	router.removeListener('change', onChange);
 });
 </script>
+
+<style lang="scss" scoped>
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+
+@keyframes slide-from-right {
+  from { transform: translateX(300px); }
+}
+
+@keyframes slide-to-left {
+  to { transform: translateX(-300px); }
+}
+
+::view-transition-old(v-bind(viewId)) {
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(v-bind(viewId)) {
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+</style>
diff --git a/packages/frontend/src/page.ts b/packages/frontend/src/page.ts
index f3ec09a16f..2891536348 100644
--- a/packages/frontend/src/page.ts
+++ b/packages/frontend/src/page.ts
@@ -4,8 +4,9 @@
  */
 
 import * as Misskey from 'misskey-js';
-import { inject, isRef, onActivated, onBeforeUnmount, provide, ref, toValue, watch } from 'vue';
+import { computed, inject, isRef, onActivated, onBeforeUnmount, provide, ref, toValue, watch } from 'vue';
 import type { MaybeRefOrGetter, Ref } from 'vue';
+import { DI } from '@/di.js';
 
 export type PageMetadata = {
 	title: string;
@@ -69,3 +70,12 @@ export const injectReactiveMetadata = (): Ref<PageMetadata | null> => {
 	const metadataRef = getMetadata();
 	return isRef(metadataRef) ? metadataRef : ref(null);
 };
+
+export function prepareViewTransition(type: string, id: string) {
+	const viewId = inject(DI.viewId);
+	const viewTransitionId = inject(DI.viewTransitionId);
+	return {
+		avatar: computed(() => 'adsfsdfsfg' + viewId + viewTransitionId.value + id),
+		//avatar: computed(() => 'adsfsdfsfg' + id),
+	};
+}
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index fb83993fee..72deefdd31 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -8,40 +8,38 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
 		<div>
-			<Transition :name="prefer.s.animation ? 'fade' : ''" mode="out-in">
-				<div v-if="note">
-					<div v-if="showNext" class="_margin">
-						<MkNotes class="" :pagination="showNext === 'channel' ? nextChannelPagination : nextUserPagination" :noGap="true" :disableAutoLoad="true"/>
-					</div>
+			<div v-if="note">
+				<div v-if="showNext" class="_margin">
+					<MkNotes class="" :pagination="showNext === 'channel' ? nextChannelPagination : nextUserPagination" :noGap="true" :disableAutoLoad="true"/>
+				</div>
 
-					<div class="_margin">
-						<div v-if="!showNext" class="_buttons" :class="$style.loadNext">
-							<MkButton v-if="note.channelId" rounded :class="$style.loadButton" @click="showNext = 'channel'"><i class="ti ti-chevron-up"></i> <i class="ti ti-device-tv"></i></MkButton>
-							<MkButton rounded :class="$style.loadButton" @click="showNext = 'user'"><i class="ti ti-chevron-up"></i> <i class="ti ti-user"></i></MkButton>
-						</div>
-						<div class="_margin _gaps_s">
-							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
-							<MkNoteDetailed :key="note.id" v-model:note="note" :initialTab="initialTab" :class="$style.note"/>
-						</div>
-						<div v-if="clips && clips.length > 0" class="_margin">
-							<div style="font-weight: bold; padding: 12px;">{{ i18n.ts.clip }}</div>
-							<div class="_gaps">
-								<MkClipPreview v-for="item in clips" :key="item.id" :clip="item"/>
-							</div>
-						</div>
-						<div v-if="!showPrev" class="_buttons" :class="$style.loadPrev">
-							<MkButton v-if="note.channelId" rounded :class="$style.loadButton" @click="showPrev = 'channel'"><i class="ti ti-chevron-down"></i> <i class="ti ti-device-tv"></i></MkButton>
-							<MkButton rounded :class="$style.loadButton" @click="showPrev = 'user'"><i class="ti ti-chevron-down"></i> <i class="ti ti-user"></i></MkButton>
+				<div class="_margin">
+					<div v-if="!showNext" class="_buttons" :class="$style.loadNext">
+						<MkButton v-if="note.channelId" rounded :class="$style.loadButton" @click="showNext = 'channel'"><i class="ti ti-chevron-up"></i> <i class="ti ti-device-tv"></i></MkButton>
+						<MkButton rounded :class="$style.loadButton" @click="showNext = 'user'"><i class="ti ti-chevron-up"></i> <i class="ti ti-user"></i></MkButton>
+					</div>
+					<div class="_margin _gaps_s">
+						<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
+						<MkNoteDetailed :key="note.id" v-model:note="note" :initialTab="initialTab" :class="$style.note"/>
+					</div>
+					<div v-if="clips && clips.length > 0" class="_margin">
+						<div style="font-weight: bold; padding: 12px;">{{ i18n.ts.clip }}</div>
+						<div class="_gaps">
+							<MkClipPreview v-for="item in clips" :key="item.id" :clip="item"/>
 						</div>
 					</div>
-
-					<div v-if="showPrev" class="_margin">
-						<MkNotes class="" :pagination="showPrev === 'channel' ? prevChannelPagination : prevUserPagination" :noGap="true"/>
+					<div v-if="!showPrev" class="_buttons" :class="$style.loadPrev">
+						<MkButton v-if="note.channelId" rounded :class="$style.loadButton" @click="showPrev = 'channel'"><i class="ti ti-chevron-down"></i> <i class="ti ti-device-tv"></i></MkButton>
+						<MkButton rounded :class="$style.loadButton" @click="showPrev = 'user'"><i class="ti ti-chevron-down"></i> <i class="ti ti-user"></i></MkButton>
 					</div>
 				</div>
-				<MkError v-else-if="error" @retry="fetchNote()"/>
-				<MkLoading v-else/>
-			</Transition>
+
+				<div v-if="showPrev" class="_margin">
+					<MkNotes class="" :pagination="showPrev === 'channel' ? prevChannelPagination : prevUserPagination" :noGap="true"/>
+				</div>
+			</div>
+			<MkError v-else-if="error" @retry="fetchNote()"/>
+			<MkLoading v-else/>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>