From f2914a1bd010ec39c57465e00fa9562ceba2d6be Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 7 May 2023 10:00:47 +0000
Subject: [PATCH] wip

---
 .../src/components/MkGalleryPostPreview.vue   | 15 +++++------
 .../src/components/MkImgWithBlurhash.vue      | 27 ++++++-------------
 2 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue
index 4f8f7b945a..d694dcce35 100644
--- a/packages/frontend/src/components/MkGalleryPostPreview.vue
+++ b/packages/frontend/src/components/MkGalleryPostPreview.vue
@@ -5,6 +5,7 @@
 			<ImgWithBlurhash
 				class="img layered"
 				:transition="safe ? null : {
+					duration: 500,
 					enterActiveClass: $style.transition_toggle_enterActive,
 					leaveActiveClass: $style.transition_toggle_leaveActive,
 					enterFromClass: $style.transition_toggle_enterFrom,
@@ -55,10 +56,7 @@ function leaveHover(): void {
 <style lang="scss" module>
 .transition_toggle_enterActive,
 .transition_toggle_leaveActive {
-	transition: opacity 0.5s;
-	position: absolute;
-	top: 0;
-	left: 0;
+	transition: opacity .5s;
 }
 
 .transition_toggle_enterFrom,
@@ -66,11 +64,10 @@ function leaveHover(): void {
 	opacity: 0;
 }
 
-.transition_toggle_enterTo,
-.transition_toggle_leaveFrom {
-	transition: none;
-	opacity: 1;
-}
+//.transition_toggle_enterTo,
+//.transition_toggle_leaveFrom {
+//	opacity: 1;
+//}
 </style>
 
 <style lang="scss" scoped>
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 4301d79a75..f521fa64c4 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -1,17 +1,16 @@
 <template>
 <div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
-	<img v-if="!loaded && src" :class="$style.loader" :src="src" loading="eager" @load="onLoad"/>
+	<canvas ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
 	<Transition
-		mode="in-out"
+		:duration="defaultStore.state.animation && props.transition?.duration || undefined"
 		:enter-active-class="defaultStore.state.animation && props.transition?.enterActiveClass || undefined"
-		:leave-active-class="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_toggle_leaveActive']) || undefined"
+		:leave-active-class="defaultStore.state.animation && props.transition?.leaveActiveClass || undefined"
 		:enter-from-class="defaultStore.state.animation && props.transition?.enterFromClass || undefined"
 		:leave-to-class="defaultStore.state.animation && props.transition?.leaveToClass || undefined"
 		:enter-to-class="defaultStore.state.animation && props.transition?.enterToClass || undefined"
 		:leave-from-class="defaultStore.state.animation && props.transition?.leaveFromClass || undefined"
 	>
-		<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
-		<img v-else :height="height" :width="width" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager"/>
+		<img v-show="loaded && !forceBlurhash" :height="height" :width="width" :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager" @load="onLoad"/>
 	</Transition>
 </div>
 </template>
@@ -27,6 +26,7 @@ const $style = useCssModule();
 
 const props = withDefaults(defineProps<{
 	transition?: {
+		duration?: number | { enter: number; leave: number; };
 		enterActiveClass?: string;
 		leaveActiveClass?: string;
 		enterFromClass?: string;
@@ -116,20 +116,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" module>
-.transition_toggle_leaveActive {
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-
-.loader {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 0;
-	height: 0;
-}
-
 .root {
 	position: relative;
 	width: 100%;
@@ -156,5 +142,8 @@ onUnmounted(() => {
 
 .img {
 	object-fit: contain;
+	position: absolute;
+	top: 0;
+	left: 0;
 }
 </style>