Animating In and Out with CSS

I have a menu which displays over the top of the current page once the hamburger icon is pressed which uses Glamor for CSS.

The menu animates in from the right of the screen and works perfectly, however i'm struggling to get it to animate out once anywhere in the Menu is pressed.

The animation is written (animateOut) but I need help with the code in flicking between animating in and out depending on the click:

• Hamburger menu clicked -> menu slides in from the right.
• Anywhere in the menu container is clicked -> menu slides out to the right.

HamburgerMenu.js

CSS

const cssHamburgerMenuIcon = css({     position: 'absolute',     height: 20,     width: 20,     right: 20,     marginTop: 20, })  const animateIn = css.keyframes({      '0%': {         transform: 'translateX(100%)'     },     '100%': {         transform: 'translateX(0%)'     } })  const animateOut = css.keyframes({      '0%': {         transform: 'translateX(0%)'     },     '100%': {         transform: 'translateX(100%)'     } })  const cssHamburgerMenu = css({     display: 'flex',     position: 'absolute',     flexDirection: 'column',     height: '100%',     width: 250,     right: 0,     top: 0,     zIndex: 1,     color: 'white',     backgroundColor: hamburgerGrey,     fontFamily: 'Century Gothic',     fontSize: '19px',     // animation     animation: `${animateIn} 0.5s`, })  const cssHamburgerList = css({     listStyleType: 'none',     lineHeight: '47px', })  const cssHamburgerListItem = css({  }) 

"CODE"

class HamburgerMenu extends Component {     constructor(props) {     super(props)     this.state = {         menuVisible: false,     } }      render() {         const menuVisible = this.state.menuVisible          return(             menuVisible ?             <div className={cssHamburgerMenu} onClick={() =>this.setState({ menuVisible: false })}>                               <ul className={cssHamburgerList}>                     <li className={cssHamburgerListItem}>Home</li>                     <li className={cssHamburgerListItem}>News</li>                     <li className={cssHamburgerListItem}>About us</li>                     <li className={cssHamburgerListItem}>More</li>                 </ul>             </div>             : (             <img                  className={cssHamburgerMenuIcon}                 src={HamburgerMenuIcon}                 onClick={() => this.setState({ menuVisible: true})                 }             />               )         )     } }     export default HamburgerMenu 

2 Answers

Answers 1

I suggest another approach:

1. Set the menu's default translateX to 100%

2. Create a class (i.e. open) which has translateX set to 0%

3. Set the menu's transition property to "transition: all 0.5s ease-in-out;"

4. Just add or remove the (open) class when needed to open/close the menu

Answers 2

i would suggest using bootstrap because its easier

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati