Animating In and Out with CSS

Question

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

Answer 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