From 9d5911d4e436859127f38d5fcdaa6cb5ce6d01e6 Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Sat, 29 Apr 2023 22:57:46 +0900
Subject: 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>
---
 .../src/components/MkGalleryPostPreview.vue        | 52 ++++++++++++++++------
 1 file changed, 38 insertions(+), 14 deletions(-)

(limited to 'packages/frontend/src/components/MkGalleryPostPreview.vue')

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;
-				}
 			}
 		}
 	}
-- 
cgit v1.2.3-freya