From 003e7b60c93988a7bfae4c03a8346d4f8a5f0bb6 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 21 Mar 2023 23:47:01 +0800
Subject: [PATCH] perf(ux): improve LQIP fade in effect

---
 _sass/addon/commons.scss | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index a4a83e3..ca88541 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -85,13 +85,9 @@ a {
 img {
   max-width: 100%;
   height: auto;
+  transition: all 0.35s ease-in-out;
 
   &[data-src] {
-    &.lazyloaded {
-      -webkit-animation: fade-in 0.4s ease-in;
-      animation: fade-in 0.4s ease-in;
-    }
-
     &[data-lqip='true'] {
       &.lazyload,
       &.lazyloading {
@@ -105,6 +101,11 @@ img {
       &.lazyloading {
         background: var(--img-bg);
       }
+
+      &.lazyloaded {
+        -webkit-animation: fade-in 0.35s ease-in;
+        animation: fade-in 0.35s ease-in;
+      }
     }
 
     &.shadow {
@@ -946,17 +947,13 @@ $sidebar-display: 'sidebar-display';
 } /* #sidebar */
 
 @media (hover: hover) {
-  .card.post-preview {
-    transition: all 0.35s ease-in-out;
-
-    img {
-      transition: all 0.35s ease-in-out;
-    }
-  }
-
   #sidebar ul > li:last-child::after {
     transition: top 0.5s ease;
   }
+
+  .post-preview {
+    transition: background-color 0.35s ease-in-out;
+  }
 }
 
 .profile-wrapper {