Detects whether transitions are applied to modal element before closi…

…ng it with transitions.
ryanlfoster · Feb 3, 2015 · 2abb4fa · 2abb4fa
1 parent 83e70da
commit 2abb4fa
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/dist/vanilla-modal.js b/dist/vanilla-modal.js
@@ -7,7 +7,7 @@ var _prototypeProperties = function (child, staticProps, instanceProps) {
 
 /**
  * @class VanillaModal
- * @version 1.0.1
+ * @version 1.1.0
  * @author Ben Ceglowski
  */
 var VanillaModal = (function () {
@@ -220,6 +220,21 @@ var VanillaModal = (function () {
       enumerable: true,
       configurable: true
     },
+    _detectTransition: {
+      value: function DetectTransition() {
+        var css = window.getComputedStyle(this.$.modal, null);
+        var transitionDuration = ["transitionDuration", "oTransitionDuration", "MozTransitionDuration", "webkitTransitionDuration"];
+        var hasTransition = transitionDuration.filter(function (i) {
+          if (typeof css[i] === "string" && parseFloat(css[i]) > 0) {
+            return true;
+          }
+        });
+        return hasTransition.length ? true : false;
+      },
+      writable: true,
+      enumerable: true,
+      configurable: true
+    },
     _close: {
 
       /**
@@ -228,7 +243,8 @@ var VanillaModal = (function () {
       value: function Close(e) {
         if (typeof this.$$.onBeforeClose === "function") this.$$.onBeforeClose.call(this);
         this._removeClass(this.$.page, this.$$["class"]);
-        if (this.$$.transitions && this.$$.transitionEnd) {
+        var transitions = this._detectTransition();
+        if (this.$$.transitions && this.$$.transitionEnd && transitions) {
           this._closeModalWithTransition();
         } else {
           this._closeModal();

diff --git a/dist/vanilla-modal.min.js b/dist/vanilla-modal.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-modal",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A dependency-free CSS-driven plain JavaScript modal written in ECMAScript 6.",
   "main": "dist/vanilla-modal.js",
   "repository": {

diff --git a/src/vanilla-modal.js b/src/vanilla-modal.js
@@ -1,6 +1,6 @@
 /**
  * @class VanillaModal
- * @version 1.0.1
+ * @version 1.1.0
  * @author Ben Ceglowski
  */
 class VanillaModal {
@@ -165,13 +165,25 @@ class VanillaModal {
     if (typeof this.$$.onOpen === 'function') this.$$.onOpen.call(this);
   }
 
+  _detectTransition() {
+    var css = window.getComputedStyle(this.$.modal, null);
+    var transitionDuration = ['transitionDuration', 'oTransitionDuration', 'MozTransitionDuration', 'webkitTransitionDuration'];
+    var hasTransition = transitionDuration.filter(function(i) {
+      if (typeof css[i] === 'string' && parseFloat(css[i]) > 0) {
+        return true;
+      }
+    });
+    return (hasTransition.length) ? true : false;
+  }
+
   /**
    * @param {Event} e
    */
   _close(e) {
     if (typeof this.$$.onBeforeClose === 'function') this.$$.onBeforeClose.call(this);
     this._removeClass(this.$.page, this.$$.class);
-    if (this.$$.transitions && this.$$.transitionEnd) {
+    var transitions = this._detectTransition();
+    if (this.$$.transitions && this.$$.transitionEnd && transitions) {
       this._closeModalWithTransition();
     } else {
       this._closeModal();