feat(reveal): add transitions

deckgo · Feb 14, 2019 · ab0f749 · ab0f749
1 parent 76e1c04
commit ab0f749
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/components/slides/deckdeckgo-slide.scss b/src/components/slides/deckdeckgo-slide.scss
@@ -10,6 +10,9 @@
   --slide-padding-bottom-default: 64px;
   --slide-padding-start-default: 64px;
 
+  --slide-reveal-transform: translateX(-4px);
+  --slide-reveal-duration: 200ms;
+
   @media screen and (max-width: 1024px) {
     --slide-padding-top-default: 16px;
     --slide-padding-end-default: 32px;

diff --git a/src/components/slides/deckdeckgo-slide.tsx b/src/components/slides/deckdeckgo-slide.tsx
@@ -26,7 +26,12 @@ export class DeckdeckgoSlideUtils {
       } else {
         Array.from(elements).forEach((element: HTMLElement) => {
           element.style.setProperty('visibility', 'hidden');
+          element.style.setProperty('transform', 'var(--slide-reveal-transform)');
+          element.style.setProperty('opacity', '0');
+
           element.classList.add('deckgo-reveal');
+          element.style.setProperty('transition', 'all var(--slide-reveal-duration) cubic-bezier(0.23, 1, 0.320, 1)');
+
         });
       }
     });
@@ -45,6 +50,8 @@ export class DeckdeckgoSlideUtils {
 
         if (nextElement) {
           nextElement.style.setProperty('visibility', 'initial');
+          nextElement.style.setProperty('opacity', '1');
+          nextElement.style.setProperty('transform', 'none');
           couldSwipe = false;
         }
       }
@@ -67,6 +74,8 @@ export class DeckdeckgoSlideUtils {
 
         if (nextElement) {
           nextElement.style.setProperty('visibility', 'hidden');
+          nextElement.style.setProperty('transform', 'var(--slide-reveal-transform)');
+          nextElement.style.setProperty('opacity', '0');
           couldSwipe = false;
         }
       }