From c8176669ebff2f4eb92e676d21833b1f6dd00519 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 29 Nov 2019 11:40:01 +0100
Subject: [PATCH] doc(#508): new CSS variable use to display smoothly the
 images

---
 .../app-components-lazy-img.md                    |  3 +++
 .../app-components-lazy-img.tsx                   | 15 +++++++++++++++
 .../components/lazy-img/deckdeckgo-lazy-img.scss  |  2 +-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/docs/docs/components/app-components-lazy-img/app-components-lazy-img.md b/docs/docs/components/app-components-lazy-img/app-components-lazy-img.md
index 9c3227b02..5730f7b6c 100644
--- a/docs/docs/components/app-components-lazy-img/app-components-lazy-img.md
+++ b/docs/docs/components/app-components-lazy-img/app-components-lazy-img.md
@@ -110,6 +110,9 @@ The following theming options will affect this component if set on its host or p
 | --deckgo-lazy-img-display | | The display property of the image |
 | --deckgo-lazy-img-border-radius | | In case you would like to specify a border radius for the image |
 | --deckgo-lazy-img-object-fit  | | The property object-fit of the image |
+| --deckgo-lazy-img-opacity-not-loaded  | 0 | The opacity of the image when not loaded |
+| --deckgo-lazy-img-opacity-loaded  | 1 | The opacity of the image when loaded |
+| --deckgo-lazy-img-transition  | opacity 0.15s linear | The animation of the image, notably use to display smoothly the image when loaded |
 
 ### Methods
 
diff --git a/docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx b/docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx
index 1552f4a09..8f46ae11a 100644
--- a/docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx
+++ b/docs/src/app/pages/docs/components/app-components-lazy-img/app-components-lazy-img.tsx
@@ -215,6 +215,21 @@ export class AppComponentsLazyImg {
 <td></td>
 <td>The property object-fit of the image</td>
 </tr>
+<tr>
+<td>--deckgo-lazy-img-opacity-not-loaded</td>
+<td>0</td>
+<td>The opacity of the image when not loaded</td>
+</tr>
+<tr>
+<td>--deckgo-lazy-img-opacity-loaded</td>
+<td>1</td>
+<td>The opacity of the image when loaded</td>
+</tr>
+<tr>
+<td>--deckgo-lazy-img-transition</td>
+<td>opacity 0.15s linear</td>
+<td>The animation of the image, notably use to display smoothly the image when loaded</td>
+</tr>
 </tbody></table>
 <h3 id="app-components-lazy-img-methods">Methods</h3>
 <p>This component also export an async method <code>lazyLoad()</code> in case you would like to trigger &quot;manually&quot; the loading of the image.</p>
diff --git a/webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.scss b/webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.scss
index 3760cdd80..051717a0f 100644
--- a/webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.scss
+++ b/webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.scss
@@ -34,5 +34,5 @@ img, svg {
 
   opacity: var(--deckgo-lazy-img-opacity-not-loaded, 0);
 
-  transition: var(--deckgo-lazy-img-transition, opacity 0.2s linear);
+  transition: var(--deckgo-lazy-img-transition, opacity 0.15s linear);
 }