Cleanup and reset FX item after transition is done

robinpoort · Mar 23, 2018 · ad02443 · ad02443
1 parent 0fc6cf7
commit ad02443
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 41 deletions.
diff --git a/dist/js/menu-animation.js b/dist/js/menu-animation.js
diff --git a/index.html b/index.html
@@ -14,6 +14,10 @@
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
             line-height: 24px;
             color: #222;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
         }
 
         ul {
@@ -57,6 +61,11 @@
             width: 100%;
         }
 
+        nav {
+            width: 100%;
+            max-width: 600px;
+        }
+
         .menu1 a:after {
             height: 2px;
             background: #0188d6;

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "Menu-animation",
   "description": "Simple CSS animated JS powered menu animations",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "homepage": "https://robinpoort.github.io/menu-animation/",
   "author": "https://github.com/robinpoort/menu-animation/graphs/contributors",
   "repository": {

diff --git a/src/js/menu-animation.js b/src/js/menu-animation.js
@@ -18,7 +18,6 @@
 
     var supports = 'querySelector' in document && 'addEventListener' in window;
 
-
     // Shared Variables
 
     var defaults = {
@@ -120,36 +119,6 @@
     };
 
 
-    // Closest
-
-    var getClosest = function ( elem, selector ) {
-
-        // Element.matches() polyfill
-        if (!Element.prototype.matches) {
-            Element.prototype.matches =
-                Element.prototype.matchesSelector ||
-                Element.prototype.mozMatchesSelector ||
-                Element.prototype.msMatchesSelector ||
-                Element.prototype.oMatchesSelector ||
-                Element.prototype.webkitMatchesSelector ||
-                function(s) {
-                    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-                        i = matches.length;
-                    while (--i >= 0 && matches.item(i) !== this) {}
-                    return i > -1;
-                };
-        }
-
-        // Get closest match
-        for ( ; elem && elem !== document; elem = elem.parentNode ) {
-            if ( elem.matches( selector ) ) return elem;
-        }
-
-        return null;
-
-    };
-
-
     // Animation
 
     var Animation = function (options) {
@@ -160,7 +129,7 @@
         var settings;
 
         // Set style
-        var setStyle = function(item, $menuFX, $menu) {
+        var setStyle = function(item, $menuFX, $menu, reset) {
 
             var width,
                 height,
@@ -196,6 +165,14 @@
                 "-webkit-transform: -webkit-translate(" + left + "px, " + top + "px);" +
                 "transform: translate(" + left + "px, " + top + "px);"
             );
+
+            // Reset
+            if (reset == true) {
+                var transitionDuration = parseFloat(getComputedStyle($menuFX)['transitionDuration']) || parseFloat(getComputedStyle($menuFX)['webkitTransitionDuration']) || parseFloat(getComputedStyle($menuFX)['mozTransitionDuration']) || 0.3;
+                setTimeout(function() {
+                    $menuFX.removeAttribute("style");
+                }, transitionDuration * 1000 + 16);
+            }
         };
 
 
@@ -225,19 +202,16 @@
                     $menu.appendChild($menuFX);
                 }
 
-                // Initial
-                setStyle($activeItem, $menuFX, $menu);
-
                 // On hover
                 $menu.addEventListener("mouseover", function(event) {
 
                     if (event.target.matches('ul')) return;
 
                     // Set to hovering item
                     if (event.target.closest(settings.target)) {
-                        setStyle(event.target, $menuFX, $menu);
+                        setStyle(event.target, $menuFX, $menu, false);
                     } else {
-                        setStyle($activeItem, $menuFX, $menu);
+                        setStyle($activeItem, $menuFX, $menu, false);
                     }
                 });
 
@@ -246,13 +220,14 @@
 
                     // Return false if we stay on the menu
                     var e = event.toElement || event.relatedTarget;
-                    if (e.parentNode == this || e == this) return;
+                    if (e.closest('ul')) return;
 
                     // Get current active item
                     $activeItem = $menu.querySelector(".is-active");
 
                     // Return to active item
-                    setStyle($activeItem, $menuFX, $menu);
+                    setStyle($activeItem, $menuFX, $menu, true);
+
                 });
 
                 // apply iniated class to menu when