Adding some transitioning to zoom

src/js/plugins/zoom.js

@@ -133,9 +133,7 @@ export default class Zoom {
    */
   zoomIn() {
     DOM.show(this.zws_.el);
-    const currentId = this.ws_.el
-      .querySelector(`.${CLASSES.SLIDE}.${CLASSES.CURRENT}`)
-      .getAttribute('id');
+    const currentId = this.ws_.currentSlide_.el.id;
     const zoomedCurrent = this.zws_.el
       .querySelector(`.${CLASSES.WRAP}.${CLASSES.CURRENT}`);
     if (zoomedCurrent) {
@@ -145,22 +143,26 @@ export default class Zoom {
       .querySelector(`#zoomed-${currentId}`)
       .classList.add(CLASSES.CURRENT);
 
-    setTimeout(() => {
-      this.ws_.disable();
-    }, 400);
     this.isZoomed_ = true;
     document.body.style.overflow = 'auto';
+
+    setTimeout(() => {
+      this.ws_.disable();
+      this.zws_.el.classList.add('in');
+    }, 50);
   }
 
   /**
    * Zoom Out the slider, remove scale from the slides.
    */
   zoomOut() {
+    this.zws_.el.classList.remove('in');
+
     setTimeout(() => {
-      DOM.hide(this.zws_.el);
       this.ws_.enable();
+      DOM.hide(this.zws_.el);
+      this.isZoomed_ = false;
+      document.body.style.overflow = '';
     }, 400);
-    this.isZoomed_ = false;
-    document.body.style.overflow = '';
   }
 }

src/scss/modules/_zoom.scss

@@ -95,6 +95,20 @@
       transform: scale(.5) translate(-50%, -50%);
     }
   }
+
+  & .column {
+    opacity: 0;
+    transform: scale(1.2);
+    transition: opacity .4s, transform .4s;
+    transition-delay: .2s;
+  }
+
+  &.in {
+    .column {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
 }
 
 .text-slide-number {
@@ -104,6 +118,8 @@
 }
 
 #webslides {
+  transition: filter .3s;
+
   &.disabled,
   &.zooming {
     position: fixed;

static/css/webslides.css

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.3.1
- * Date: 2017-06-27
+ * Date: 2017-06-28
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -46,8 +46,8 @@
 	14. Forms
   15. Longform Elements
 	16. Safari Bug (flex-wrap)
-	17. Print
-  18. Slidex index (aka zoom)
+	17. Slidex index (aka zoom)
+  18. Print
   19. Colors
 ----------------------------------------------------------------------------------- */
 /*
@@ -2865,44 +2865,6 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
 .cta:after {
   width: 0; }
 
-/*=========================================
-17. PRINT
-=========================================== */
-@media print {
-  @page {
-    margin: .5cm;
-    size: A4 landscape; }
-  * {
-    background: transparent !important;
-    color: #000 !important;
-    -webkit-filter: none !important;
-            filter: none !important;
-    text-shadow: none !important; }
-  html,
-  body,
-  #webslides {
-    height: auto !important;
-    overflow: auto !important;
-    width: auto !important; }
-  #webslides {
-    overflow-x: auto !important;
-    overflow-y: auto !important; }
-  section,
-  .slide {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
-    display: flex !important;
-    height: auto !important; }
-  section * {
-    -webkit-animation: none;
-            animation: none; }
-  table,
-  figure {
-    page-break-inside: avoid; }
-  #counter,
-  #navigation {
-    display: none; } }
-
 /*==============================================
 18. Slides Index: Thumbnails navigation gallery
 ================================================ */
@@ -2996,20 +2958,76 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
       #webslides-zoomed .column > .wrap-zoom > .slide {
         -webkit-transform: scale(0.5) translate(-50%, -50%);
                 transform: scale(0.5) translate(-50%, -50%); } }
+  #webslides-zoomed .column {
+    opacity: 0;
+    -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+    -webkit-transition: opacity .4s, -webkit-transform .4s;
+    transition: opacity .4s, -webkit-transform .4s;
+    transition: opacity .4s, transform .4s;
+    transition: opacity .4s, transform .4s, -webkit-transform .4s;
+    -webkit-transition-delay: .2s;
+            transition-delay: .2s; }
+  #webslides-zoomed.in .column {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1); }
 
 .text-slide-number {
   display: inline-block;
   margin: .8rem auto;
   text-align: center; }
 
-#webslides.disabled, #webslides.zooming {
-  position: fixed;
-  width: 100%;
-  z-index: 0; }
+#webslides {
+  -webkit-transition: -webkit-filter .3s;
+  transition: -webkit-filter .3s;
+  transition: filter .3s;
+  transition: filter .3s, -webkit-filter .3s; }
+  #webslides.disabled, #webslides.zooming {
+    position: fixed;
+    width: 100%;
+    z-index: 0; }
+  #webslides.disabled {
+    -webkit-filter: blur(10px);
+            filter: blur(10px); }
 
-#webslides.disabled {
-  -webkit-filter: blur(10px);
-          filter: blur(10px); }
+/*=========================================
+17. PRINT
+=========================================== */
+@media print {
+  @page {
+    margin: .5cm;
+    size: A4 landscape; }
+  * {
+    background: transparent !important;
+    color: #000 !important;
+    -webkit-filter: none !important;
+            filter: none !important;
+    text-shadow: none !important; }
+  html,
+  body,
+  #webslides {
+    height: auto !important;
+    overflow: auto !important;
+    width: auto !important; }
+  #webslides {
+    overflow-x: auto !important;
+    overflow-y: auto !important; }
+  section,
+  .slide {
+    display: -webkit-box !important;
+    display: -ms-flexbox !important;
+    display: flex !important;
+    height: auto !important; }
+  section * {
+    -webkit-animation: none;
+            animation: none; }
+  table,
+  figure {
+    page-break-inside: avoid; }
+  #counter,
+  #navigation {
+    display: none; } }
 
 /*=========================================
 19. Colors
@@ -3248,7 +3266,7 @@ figure[class*='text-pull-'] {
 .text-shadow {
   text-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }
 
-/* -- time, ampersands, prepositions (for, of...), symbols...  
+/* -- time, ampersands, prepositions (for, of...), symbols...
 [class*='card-'] time,
 h1 span {
   color: #abd;
@@ -3273,7 +3291,8 @@ nav[role='navigation'] li.active a {
   color: #fff; }
 
 nav[role='navigation'] li a {
-  background-color: rgba(50, 50, 50, 0.9); }
+  background-color: rgba(50, 50, 50, 0.9);
+  color: #fff; }
   nav[role='navigation'] li a:hover {
     background-color: rgba(50, 50, 50, 0.7); }
 
@@ -3305,7 +3324,7 @@ nav li.email a:hover {
   background-color: rgba(0, 20, 80, 0.03); }
 
 /*=========================================
-Features & Clients List 
+Features & Clients List
 =========================================== */
 .features li,
 .clients li {
@@ -3335,7 +3354,7 @@ Features & Clients List
   border: 0; }
 
 /*===========================================
-flexblock.steps 
+flexblock.steps
 ============================================= */
 .steps li:nth-child(1) {
   background-color: #e8eef7; }
@@ -3573,7 +3592,7 @@ tr:nth-child(even) > td:hover {
   background-color: rgba(255, 255, 255, 0.5); }
 
 /*============================
-Browser (Screenshots) 
+Browser (Screenshots)
 ============================== */
 .browser {
   border: 1px solid rgba(0, 20, 80, 0.1); }

static/js/webslides.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.3.1
- * Date: 2017-06-27
+ * Date: 2017-06-28
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -1152,6 +1152,10 @@ var WebSlides = function () {
     key: 'disable',
     value: function disable() {
       this.el.classList.add(CLASSES.DISABLED);
+
+      if (this.plugins.autoslide && this.plugins.autoslide.time !== false) {
+        this.plugins.autoslide.stop();
+      }
     }
 
     /**
@@ -1162,6 +1166,10 @@ var WebSlides = function () {
     key: 'enable',
     value: function enable() {
       this.el.classList.remove(CLASSES.DISABLED);
+
+      if (this.plugins.autoslide && this.plugins.autoslide.time !== false) {
+        this.plugins.autoslide.play();
+      }
     }
 
     /**
@@ -2769,9 +2777,13 @@ var Zoom = function () {
   _createClass(Zoom, [{
     key: 'onKeyDown',
     value: function onKeyDown(event) {
-      if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.includes(event.which)) {
+      if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.some(function (key) {
+        return key === event.which;
+      })) {
         this.zoomIn();
-      } else if (this.isZoomed_ && (__WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.includes(event.which) || event.which === __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].ESCAPE)) {
+      } else if (this.isZoomed_ && (__WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.some(function (key) {
+        return key === event.which;
+      }) || event.which === __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].ESCAPE)) {
         this.zoomOut();
       }
     }
@@ -2872,17 +2884,20 @@ var Zoom = function () {
       var _this3 = this;
 
       __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el);
-      var currentId = this.ws_.el.querySelector('.' + CLASSES.SLIDE + '.' + CLASSES.CURRENT).getAttribute('id');
+      var currentId = this.ws_.currentSlide_.el.id;
       var zoomedCurrent = this.zws_.el.querySelector('.' + CLASSES.WRAP + '.' + CLASSES.CURRENT);
       if (zoomedCurrent) {
         zoomedCurrent.classList.remove(CLASSES.CURRENT);
       }
       this.zws_.el.querySelector('#zoomed-' + currentId).classList.add(CLASSES.CURRENT);
-      setTimeout(function () {
-        _this3.ws_.disable();
-      }, 400);
+
       this.isZoomed_ = true;
       document.body.style.overflow = 'auto';
+
+      setTimeout(function () {
+        _this3.ws_.disable();
+        _this3.zws_.el.classList.add('in');
+      }, 50);
     }
 
     /**
@@ -2894,12 +2909,14 @@ var Zoom = function () {
     value: function zoomOut() {
       var _this4 = this;
 
+      this.zws_.el.classList.remove('in');
+
       setTimeout(function () {
-        __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(_this4.zws_.el);
         _this4.ws_.enable();
+        __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(_this4.zws_.el);
+        _this4.isZoomed_ = false;
+        document.body.style.overflow = '';
       }, 400);
-      this.isZoomed_ = false;
-      document.body.style.overflow = '';
     }
   }]);