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

On update loaded animation. Fixed.

Browse Source
This commit is contained in:
Alexander Bell
2018-06-06 11:19:38 -07:00
parent b4dc4defb6
commit 9d846a7bd8
2 changed files with 11 additions and 15 deletions
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.6", "version": "1.0.7",
"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",

24
src/components/Menu.js
View File

@ -38,35 +38,31 @@ class App extends Component {
* } * }
*/ */
this.state = { this.open = false;
id: this.getId(), this.id = this.getId();
open: false
}
} }
componentDidMount() { componentDidMount() {
//Event listener for click //Event listener for click
document.addEventListener("click", (event) => { document.addEventListener("click", (event) => {
const id = this.state.id; const id = this.id;
const open = this.state.open; const open = this.open;
if(event.target.closest('#'+id) && !open) { if(event.target.closest('#'+id) && !open) {
this.setState({ this.open = true;
open: true animate();
});
} }
if(!event.target.closest('#'+id) && open) { if(!event.target.closest('#'+id) && open) {
this.setState({ this.open = false;
open: false animate();
});
} }
}); });
} }
componentDidUpdate() { animate() {
const id = this.state.id; const id = this.state.id;
//Targets that will be triggered //Targets that will be triggered
@ -76,7 +72,7 @@ class App extends Component {
if(this.state.open) { if(this.open) {
var animation = anime.timeline(); var animation = anime.timeline();
//Display buttons //Display buttons