用CSS动画进出动画

Question

我有一个菜单,一旦按下使用Glamour for CSS的汉堡包图标,就显示在当前页面的顶部.

菜单从屏幕右侧动画制作并完美运行,但是我很难在菜单按下的任何地方进行动画处理.

动画是写的(animateOut)但我需要帮助代码在动画输入和输出之间轻弹,具体取决于点击:

• 单击汉堡菜单 - >菜单从右侧滑入.
• 单击菜单容器中的任意位置 - >菜单向右滑动.

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({

})

"码"

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

我建议另一种方法:

1. 将菜单的默认translateX设置为100%

2. 创建一个将translateX设置为0%的类(即open)

3. 将菜单的过渡属性设置为"transition:all 0.5s ease-in-out;"

4. 只需在需要打开/关闭菜单时添加或删除(打开)类