diff --git a/package-lock.json b/package-lock.json index fe3ae4b..5f685ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-animated-menus", - "version": "1.0.4", + "version": "1.0.15", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index faf8887..afde5de 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-animated-menus", - "version": "1.0.15", + "version": "1.0.16", "description": "React component that mounts three dot button that morphs into a menu by clicking on it.", "main": "./lib/index.js", "license": "MIT", diff --git a/src/components/Menu.js b/src/components/Menu.js index af99695..e25e1d5 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -99,7 +99,7 @@ class App extends Component { borderRadius: { value: 0, easing: "easeOutCubic", - duration: 900 + duration: 400 }, duration: 400, easing: "easeInOutCubic", @@ -110,10 +110,10 @@ class App extends Component { scaleX: [2.5,1], opacity: 1, duration: function(targetElements, i, l) { - return 400 + (i * 200); + return 300 + (i * 200); }, easing: 'easeInOutCubic', - offset: '-=700' + offset: '-=300' }); } else { animation = anime.timeline(); @@ -127,7 +127,7 @@ class App extends Component { targets: targetButton, scaleX: [1,2.5], duration: function(targetElements, i, l) { - return 400 + (i * 200); + return 300 + (i * 200); }, opacity: 0, easing: 'easeInOutCubic' @@ -143,7 +143,7 @@ class App extends Component { scaleX: [1,0.1], scaleY: [1,0.14], borderRadius: "100%", - duration: 700, + duration: 400, backgroundColor: this.getColor(), easing: "easeInOutCubic", offset: '-=500' @@ -153,10 +153,10 @@ class App extends Component { animation.complete = function() { targetButton.forEach((element) => { element.style.display = "none"; - element.style.zIndex = 1; + element.style.zIndex = 0; }); - targetMenu.style.zIndex = 1; + targetMenu.style.zIndex = 0; }; } diff --git a/src/styles/Menu.css b/src/styles/Menu.css index 2c7e605..c86d274 100644 --- a/src/styles/Menu.css +++ b/src/styles/Menu.css @@ -4,7 +4,7 @@ overflow: visible; transition: opacity 0.5s; cursor: pointer; - z-index: 1; + z-index: 0; } .ram-Menu_closed:hover { @@ -62,7 +62,7 @@ background-color: white; transition: background-color 0.5s, padding 0.5s; opacity: 0; - z-index: 1; + z-index: 0; padding-top: 25%; color: rgb(60, 60, 60); }