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
saberland · Aug 29, 2019 · 72ccc7d · 72ccc7d
1 parent 0d5a936
commit 72ccc7d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git 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
@@ -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);
 }