From 72ccc7d292443ca278f5959b21a737fd5b2f6745 Mon Sep 17 00:00:00 2001
From: "Koyuki (EGOIST)" <0x142857@gmail.com>
Date: Thu, 29 Aug 2019 17:01:34 +0800
Subject: [PATCH] fix: remove blendIn class when image is loaded (#390)

* remove blendIn class when image is loaded

* tweak transition

* tweak transition

* use data-lazy-loaded again
---
 .../saber-plugin-image/lib/saber-browser.js    | 18 ++++++++++++------
 .../saber-plugin-image/lib/styles.module.css   | 12 +-----------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/saber-plugin-image/lib/saber-browser.js b/packages/saber-plugin-image/lib/saber-browser.js
index 7358089c2..c87e0628a 100644
--- a/packages/saber-plugin-image/lib/saber-browser.js
+++ b/packages/saber-plugin-image/lib/saber-browser.js
@@ -13,16 +13,22 @@ export default ({ Vue }) => {
 
       if ($el.dataset.src || $el.dataset.srcset) {
         lozad($el, {
-          loaded(el) {
-            el.addEventListener(
-              'load',
-              () => el.setAttribute('data-lazy-loaded', ''),
-              { once: true }
-            )
+          loaded: el => {
+            el.addEventListener('load', () => {
+              el.setAttribute('data-lazy-loaded', '')
+              this.removeBlendIn = setTimeout(() => {
+                el.classList.remove(styles.blendIn)
+              }, 300)
+            })
           }
         }).observe()
       }
     },
+    beforeDestroy() {
+      if (this.removeBlendIn) {
+        clearTimeout(this.removeBlendIn)
+      }
+    },
     render(h) {
       const lazy = Object.assign(
         options,
diff --git a/packages/saber-plugin-image/lib/styles.module.css b/packages/saber-plugin-image/lib/styles.module.css
index ca881c9df..9c15f9d1c 100644
--- a/packages/saber-plugin-image/lib/styles.module.css
+++ b/packages/saber-plugin-image/lib/styles.module.css
@@ -1,16 +1,6 @@
-.enter-active-class,
-.leave-active-class {
-  transition: opacity 0.5s;
-}
-
-.enter-class,
-.leave-to-class {
-  opacity: 0;
-}
-
 .blendIn[data-src],
 .blendIn[data-srcset] {
-  transition: filter 0.5s;
+  transition: filter 0.3s;
   filter: blur(5px);
 }