From 321537530947f80a9a6b0c2d8b67b14fd410879c Mon Sep 17 00:00:00 2001 From: Alexander Bell Date: Tue, 5 Jun 2018 22:28:54 -0700 Subject: [PATCH] Bug fixes and performance improvements --- package-lock.json | 2 +- package.json | 2 +- src/components/Menu.js | 106 ++++++++++++++++++++++------------------- src/styles/Menu.css | 65 ++++++++++++------------- 4 files changed, 91 insertions(+), 84 deletions(-) diff --git a/package-lock.json b/package-lock.json index 676faaf..fe3ae4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-animated-menus", - "version": "1.0.0", + "version": "1.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 9f88f44..3e8ee49 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "./lib/index.js", "license": "MIT", "scripts": { - "build": "webpack" + "build": "webpack" }, "peerDependencies": { "prop-types": "^15.6.0", diff --git a/src/components/Menu.js b/src/components/Menu.js index 16a4b29..8ba604a 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -71,8 +71,7 @@ class App extends Component { //Targets that will be triggered var targetDots = document.querySelectorAll('#'+id+' .Menu_dot'); - var targetElement = document.querySelectorAll('#'+id+' .Menu_element'); - var targetElements = document.querySelector('#'+id+' .Menu_elements'); + var targetButton = document.querySelectorAll('#'+id+' .Menu_button'); var targetMenu = document.querySelector('#'+id+'.Menu'); @@ -80,8 +79,10 @@ class App extends Component { if(this.state.open) { var animation = anime.timeline(); - //Display elements - targetElements.style.display = "block"; + //Display buttons + targetButton.forEach((element) => { + element.style.display = "block"; + }); //Remove hover effect targetMenu.classList.remove("Menu_closed"); @@ -89,23 +90,31 @@ class App extends Component { animation .add({ targets: targetDots, - scaleX: 9, - scaleY: 10, - borderRadius: 0, - duration: 1300, - translateY: "40%", - backgroundColor: "rgb(255, 255, 255)", - easing: 'easeOutExpo' + translateX: ["-44.5%","0%"], + translateY: function(targetElements, i, l) { + if(i===0) return ["-44%","0%"]; + if(i===1) return ["-44%","79%"]; + if(i===2) return ["-44%","157%"]; + }, + scaleX: [0.1,1], + scaleY: [0.14,1], + borderRadius: { + value: 0, + easing: "easeOutCubic", + duration: 1000 + }, + duration: 2000, + backgroundColor: "rgb(255, 255, 255)" }) .add({ - targets: targetElement, - scaleX: [2,1], + targets: targetButton, + scaleX: [2.5,1], opacity: 1, duration: function(targetElements, i, l) { - return 500 + (i * 200); + return 400 + (i * 200); }, - easing: 'easeInOutQuart', - offset: '-=1100' + easing: 'easeOutCubic', + offset: '-=1700' }); } else { animation = anime.timeline(); @@ -116,29 +125,36 @@ class App extends Component { animation .add({ - targets: targetElement, - scaleX: [1,2], - opacity: 0, + targets: targetButton, + scaleX: [1,2.5], duration: function(targetElements, i, l) { - return 500 + (i * 200); + return 400 + (i * 200); }, - easing: 'easeInOutQuart' + opacity: 0, + easing: 'easeInOutCubic' }) .add({ targets: targetDots, - scaleX: 1, - scaleY: 1, + translateX: ["0%","-44.5%"], + translateY: function(targetElements, i, l) { + if(i===0) return ["0%","-44%"]; + if(i===1) return ["79%","-44%"]; + if(i===2) return ["157%","-44%"]; + }, + scaleX: [1,0.1], + scaleY: [1,0.14], borderRadius: "100%", - duration: 1300, - translateY: 0, - backgroundColor: color, - easing: 'easeOutExpo', + duration: 1000, + backgroundColor: this.getColor(), + easing: "easeInOutCubic", offset: '-=500' }); //Remove menu after animation finished animation.complete = function() { - targetElements.style.display = "none"; + targetButton.forEach((element) => { + element.style.display = "none"; + }); }; } } @@ -211,37 +227,31 @@ class App extends Component { backgroundColor: this.getColor() }; + const styleFont = {fontSize: style.width}; + return (
-
-
- +
+
+ {this.props.food.a.value} +
-
- +
+
+ {this.props.food.b.value} +
-
- +
+
+ {this.props.food.c.value} +
-
- -
-
- {this.props.food.a.value} -
-
- {this.props.food.b.value} -
-
- {this.props.food.c.value} -
-
); } diff --git a/src/styles/Menu.css b/src/styles/Menu.css index 2253188..50e3d2c 100644 --- a/src/styles/Menu.css +++ b/src/styles/Menu.css @@ -3,7 +3,6 @@ background-color: transparent; overflow: visible; transition: opacity 0.5s; - border-radius: 20%; cursor: pointer; } @@ -11,61 +10,60 @@ opacity: 0.7; } -.Menu_dots { - position: absolute; - top: 0; - width: 100%; - height: 100%; - overflow: visible; -} - .Menu_dotBox { position: relative; width: 100%; - height: 33.33%; + height: 33.3333%; background-color: transparent; } .Menu_dot { position: absolute; - width: 70%; - height: 70%; + width: 600%; + height: 500%; border-radius: 100%; top: 15%; left: 15%; transition: opacity 0.4s; } +/*.Menu_dotA { + transform: translateY(0%) scale(1,1); +} +.Menu_dotB { + transform: translateY(79%) scale(1,1); +} +.Menu_dotC { + transform: translateY(157%) scale(1,1); +}*/ +.Menu_dotA { + transform: translate(-44.5%, -44%) scale(0.1,0.14); +} +.Menu_dotB { + transform: translate(-44.5%, -44%) scale(0.1,0.14); +} +.Menu_dotC { + transform: translate(-44.5%, -44%) scale(0.1,0.14); +} + .Menu:hover .Menu_dot { opacity: 1; } -.Menu_elements { - position: absolute; - top: -6.5%; - left: -265%; - width: 644%; - height: 306%; - background-color: transparent; - display: none; - overflow: visible; -} - -.Menu_element { - position: relative; - width: 100%; - height: 33.33%; - font-size: 0.8em; - text-align: center; - padding-top: 15%; - box-sizing: border-box; -} - .Menu_button { + position: relative; + display: none; width: 100%; + height: 100%; + text-align: center; + text-align: center; + box-sizing: border-box; background-color: white; transition: background-color 0.5s, padding 0.5s; opacity: 0; + z-index: 1; + padding-top: 25%; + color: rgb(60, 60, 60); } .Menu_button:hover { background-color: rgb(227, 227, 227); @@ -74,5 +72,4 @@ .Menu_button:active { transition: background-color 0.1s; background-color: rgb(207, 207, 207); - padding-left: 5%; }