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

Animation shorter, zIndex added

Browse Source
This commit is contained in:
Alexander Bell 2018-06-08 10:06:51 -07:00
parent 842f764c96
commit f76d93841a
3 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "react-animated-menus", "name": "react-animated-menus",
"version": "1.0.12", "version": "1.0.13",
"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

@ -75,10 +75,14 @@ class App extends Component {
if(this.open) { if(this.open) {
var animation = anime.timeline(); var animation = anime.timeline();
//Display buttons //Styles
targetButton.forEach((element) => { targetButton.forEach((element) => {
element.style.display = "block"; element.style.display = "block";
element.style.zIndex = 1000;
}); });
targetDots.forEach((element) => {
element.style.zIndex = 1000;
})
//Remove hover effect //Remove hover effect
targetMenu.classList.remove("Menu_closed"); targetMenu.classList.remove("Menu_closed");
@ -97,9 +101,9 @@ class App extends Component {
borderRadius: { borderRadius: {
value: 0, value: 0,
easing: "easeOutCubic", easing: "easeOutCubic",
duration: 500 duration: 900
}, },
duration: 1000, duration: 1200,
backgroundColor: "rgb(255, 255, 255)" backgroundColor: "rgb(255, 255, 255)"
}) })
.add({ .add({
@ -150,7 +154,11 @@ 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;
}); });
targetDots.forEach((element) => {
element.style.zIndex = 1;
})
}; };
} }
} }

1
src/styles/Menu.css
View File

@ -4,6 +4,7 @@
overflow: visible; overflow: visible;
transition: opacity 0.5s; transition: opacity 0.5s;
cursor: pointer; cursor: pointer;
z-index: 1;
} }
.Menu_closed:hover { .Menu_closed:hover {