wip

packages/frontend/src/components/MkHorizontalSwipe.vue

@@ -11,18 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@touchmove.passive="touchMove"
 	@touchend.passive="touchEnd"
 >
-	<Transition
+	<!-- 【注意】slot内の最上位要素に動的にkeyを設定すること -->
-		:class="[$style.transitionChildren, { [$style.swiping]: isSwipingForClass }]"
+	<!-- 各最上位要素にユニークなkeyの指定がないとTransitionがうまく動きません -->
-		:enterActiveClass="$style.swipeAnimation_enterActive"
+	<slot></slot>
-		:leaveActiveClass="$style.swipeAnimation_leaveActive"
-		:enterFromClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_enterFrom : $style.swipeAnimationRight_enterFrom"
-		:leaveToClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_leaveTo : $style.swipeAnimationRight_leaveTo"
-		:style="`--swipe: ${pullDistance}px;`"
-	>
-		<!-- 【注意】slot内の最上位要素に動的にkeyを設定すること -->
-		<!-- 各最上位要素にユニークなkeyの指定がないとTransitionがうまく動きません -->
-		<slot></slot>
-	</Transition>
 </div>
 </template>
 <script lang="ts" setup>

packages/frontend/src/components/MkNote.vue

@@ -224,6 +224,7 @@ import { getAppearNote } from '@/utility/get-appear-note.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { prepareViewTransition } from '@/page.js';
+import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;

packages/frontend/src/components/MkNoteDetailed.vue

@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<article :class="$style.note" @contextmenu.stop="onContextmenu">
 		<header :class="$style.noteHeader">
-			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
+			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview :style="{ viewTransitionName: transitionName }"/>
 			<div :class="$style.noteHeaderBody">
 				<div>
 					<MkA v-user-preview="appearNote.user.id" :class="$style.noteHeaderName" :to="userPage(appearNote.user)">
@@ -255,6 +255,7 @@ import { isEnabledUrlPreview } from '@/instance.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;
@@ -263,6 +264,8 @@ const props = withDefaults(defineProps<{
 	initialTab: 'replies',
 });
 
+const transitionName = prepareViewTransition('note-noteDetailed', props.note.id).avatar;
+
 const inChannel = inject('inChannel', null);
 
 const note = ref(deepClone(props.note));
@@ -669,6 +672,8 @@ function loadConversation() {
 	flex-shrink: 0;
 	width: 58px;
 	height: 58px;
+
+	contain: paint;
 }
 
 .noteHeaderBody {

packages/frontend/src/di.ts

@@ -11,4 +11,5 @@ export const DI = {
 	router: Symbol() as InjectionKey<IRouter>,
 	viewId: Symbol() as InjectionKey<string>,
 	viewTransitionId: Symbol() as InjectionKey<Ref<string>>,
+	mock: Symbol() as InjectionKey<boolean>,
 };