aleabodo/react-animated-menus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

zIndex problem fixed. animation faster

Browse Source
This commit is contained in:
Alexander Bell 2018-07-10 23:00:42 -07:00
parent 78405274d3
commit 70cad269c2
4 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "react-animated-menus", "name": "react-animated-menus",
"version": "1.0.4", "version": "1.0.15",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-animated-menus", "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.", "description": "React component that mounts three dot button that morphs into a menu by clicking on it.",
"main": "./lib/index.js", "main": "./lib/index.js",
"license": "MIT", "license": "MIT",

14
src/components/Menu.js
View File

@ -99,7 +99,7 @@ class App extends Component {
borderRadius: { borderRadius: {
value: 0, value: 0,
easing: "easeOutCubic", easing: "easeOutCubic",
duration: 900 duration: 400
}, },
duration: 400, duration: 400,
easing: "easeInOutCubic", easing: "easeInOutCubic",
@ -110,10 +110,10 @@ class App extends Component {
scaleX: [2.5,1], scaleX: [2.5,1],
opacity: 1, opacity: 1,
duration: function(targetElements, i, l) { duration: function(targetElements, i, l) {
return 400 + (i * 200); return 300 + (i * 200);
}, },
easing: 'easeInOutCubic', easing: 'easeInOutCubic',
offset: '-=700' offset: '-=300'
}); });
} else { } else {
animation = anime.timeline(); animation = anime.timeline();
@ -127,7 +127,7 @@ class App extends Component {
targets: targetButton, targets: targetButton,
scaleX: [1,2.5], scaleX: [1,2.5],
duration: function(targetElements, i, l) { duration: function(targetElements, i, l) {
return 400 + (i * 200); return 300 + (i * 200);
}, },
opacity: 0, opacity: 0,
easing: 'easeInOutCubic' easing: 'easeInOutCubic'
@ -143,7 +143,7 @@ class App extends Component {
scaleX: [1,0.1], scaleX: [1,0.1],
scaleY: [1,0.14], scaleY: [1,0.14],
borderRadius: "100%", borderRadius: "100%",
duration: 700, duration: 400,
backgroundColor: this.getColor(), backgroundColor: this.getColor(),
easing: "easeInOutCubic", easing: "easeInOutCubic",
offset: '-=500' offset: '-=500'
@ -153,10 +153,10 @@ class App extends Component {
animation.complete = function() { animation.complete = function() {
targetButton.forEach((element) => { targetButton.forEach((element) => {
element.style.display = "none"; element.style.display = "none";
element.style.zIndex = 1; element.style.zIndex = 0;
}); });
targetMenu.style.zIndex = 1; targetMenu.style.zIndex = 0;
}; };
} }

4
src/styles/Menu.css
View File

@ -4,7 +4,7 @@
overflow: visible; overflow: visible;
transition: opacity 0.5s; transition: opacity 0.5s;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 0;
} }
.ram-Menu_closed:hover { .ram-Menu_closed:hover {
@ -62,7 +62,7 @@
background-color: white; background-color: white;
transition: background-color 0.5s, padding 0.5s; transition: background-color 0.5s, padding 0.5s;
opacity: 0; opacity: 0;
z-index: 1; z-index: 0;
padding-top: 25%; padding-top: 25%;
color: rgb(60, 60, 60); color: rgb(60, 60, 60);
} }