feat: make `MkImgWithBlurhash` transitionable (#10500)

* feat: make `MkImgWithBlurhash` animatable

* refactor: split out transition styles

* fix: bug

* test: waitFor image loads

* style: remove unused await

* fix

* fix type error

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>

1 files changed, 38 insertions, 14 deletions

diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue
index 944f5ad97b..4f8f7b945a 100644
--- a/packages/frontend/src/components/MkGalleryPostPreview.vue
+++ b/packages/frontend/src/components/MkGalleryPostPreview.vue
@@ -1,9 +1,21 @@
 <template>
 <MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1" @pointerenter="enterHover" @pointerleave="leaveHover">
 	<div class="thumbnail">
-		<ImgWithBlurhash class="img" :hash="post.files[0].blurhash"/>
 		<Transition>
-			<ImgWithBlurhash v-if="show" class="img layered" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
+			<ImgWithBlurhash
+				class="img layered"
+				:transition="safe ? null : {
+					enterActiveClass: $style.transition_toggle_enterActive,
+					leaveActiveClass: $style.transition_toggle_leaveActive,
+					enterFromClass: $style.transition_toggle_enterFrom,
+					leaveToClass: $style.transition_toggle_leaveTo,
+					enterToClass: $style.transition_toggle_enterTo,
+					leaveFromClass: $style.transition_toggle_leaveFrom,
+				}"
+				:src="post.files[0].thumbnailUrl"
+				:hash="post.files[0].blurhash"
+				:force-blurhash="!show"
+			/>
 		</Transition>
 	</div>
 	<article>
@@ -28,7 +40,8 @@ const props = defineProps<{
 }>();
 
 const hover = ref(false);
-const show = computed(() => defaultStore.state.nsfw === 'ignore' || defaultStore.state.nsfw === 'respect' && !props.post.isSensitive || hover.value);
+const safe = computed(() => defaultStore.state.nsfw === 'ignore' || defaultStore.state.nsfw === 'respect' && !props.post.isSensitive);
+const show = computed(() => safe.value || hover.value);
 
 function enterHover(): void {
 	hover.value = true;
@@ -39,6 +52,27 @@ function leaveHover(): void {
 }
 </script>
 
+<style lang="scss" module>
+.transition_toggle_enterActive,
+.transition_toggle_leaveActive {
+	transition: opacity 0.5s;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.transition_toggle_enterFrom,
+.transition_toggle_leaveTo {
+	opacity: 0;
+}
+
+.transition_toggle_enterTo,
+.transition_toggle_leaveFrom {
+	transition: none;
+	opacity: 1;
+}
+</style>
+
 <style lang="scss" scoped>
 .ttasepnz {
 	display: block;
@@ -66,7 +100,7 @@ function leaveHover(): void {
 		width: 100%;
 		height: 100%;
 		position: absolute;
-		transition: all 0.5s ease;
+		transition: transform 0.5s ease;
 
 		> .img {
 			width: 100%;
@@ -76,16 +110,6 @@ function leaveHover(): void {
 			&.layered {
 				position: absolute;
 				top: 0;
-
-				&.v-enter-active,
-				&.v-leave-active {
-					transition: opacity 0.5s ease;
-				}
-
-				&.v-enter-from,
-				&.v-leave-to {
-					opacity: 0;
-				}
 			}
 		}
 	}