Blur effect

static/js/webslides.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.2.1
- * Date: 2017-04-26
+ * Date: 2017-04-29
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -2723,8 +2723,16 @@ var Zoom = function () {
   }, {
     key: 'zoomIn',
     value: function zoomIn() {
-      this.ws_.disable();
+      var _this3 = this;
+
+      this.ws_.el.classList.add('zooming', 'in');
+      this.zws_.el.classList.add('zooming', 'in');
       __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el);
+      setTimeout(function () {
+        _this3.ws_.el.classList.remove('zooming', 'in');
+        _this3.zws_.el.classList.remove('zooming', 'in');
+        _this3.ws_.disable();
+      }, 400);
       this.isZoomed_ = true;
       document.body.style.overflow = 'auto';
     }
@@ -2736,8 +2744,16 @@ var Zoom = function () {
   }, {
     key: 'zoomOut',
     value: function zoomOut() {
-      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el);
-      this.ws_.enable();
+      var _this4 = this;
+
+      this.ws_.el.classList.add('zooming', 'out');
+      this.zws_.el.classList.add('zooming', 'out');
+      setTimeout(function () {
+        _this4.ws_.el.classList.remove('zooming', 'out');
+        _this4.zws_.el.classList.remove('zooming', 'out');
+        __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(_this4.zws_.el);
+        _this4.ws_.enable();
+      }, 400);
       this.isZoomed_ = false;
       document.body.style.overflow = '';
     }
@@ -2750,14 +2766,14 @@ var Zoom = function () {
   }, {
     key: 'onWindowResize',
     value: function onWindowResize(ev) {
-      var _this3 = this;
+      var _this5 = this;
 
       if (this.isZoomed_) this.zoomOut();
 
       this.zws_.slides.forEach(function (elem) {
         var wrap = elem.el.parentElement;
         var div = wrap.parentElement;
-        _this3.setSizes_(div, wrap, elem);
+        _this5.setSizes_(div, wrap, elem);
       });
     }
   }]);