From 6cb3183c2e5e0828f6f54b9c6dcbf5e52cb2ac07 Mon Sep 17 00:00:00 2001
From: Diu <ddiu8081@gmail.com>
Date: Fri, 13 Jan 2023 14:19:46 +0800
Subject: [PATCH] feat(ui): smoothly unblurring picture placeholders (#1026)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
resolves https://github.com/elk-zone/elk/issues/1022
---
 components/common/CommonBlurhash.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/common/CommonBlurhash.vue b/components/common/CommonBlurhash.vue
index 89624d49..c645b6d3 100644
--- a/components/common/CommonBlurhash.vue
+++ b/components/common/CommonBlurhash.vue
@@ -38,6 +38,19 @@ onMounted(() => {
 </script>
 
 <template>
-  <img v-if="isLoaded || !placeholderSrc" v-bind="$attrs" :src="src" :srcset="srcset">
-  <img v-else v-bind="$attrs" :src="placeholderSrc">
+  <Transition>
+    <img v-if="isLoaded || !placeholderSrc" v-bind="$attrs" :src="src" :srcset="srcset" absolute>
+    <img v-else v-bind="$attrs" :src="placeholderSrc" absolute>
+  </Transition>
+  <img v-bind="$attrs" :src="placeholderSrc" z-0 aria-hidden>
 </template>
+
+<style>
+.v-enter-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from {
+  opacity: 0;
+}
+</style>