html - 使用 CSS 制作进出动画

Question

我有一个菜单，一旦按下汉堡包图标，它就会显示在当前页面的顶部，它使用 Glamor for CSS。

菜单从屏幕右侧进入动画并且工作完美，但是我很难让它在按下菜单中的任何位置后动画出来。

动画已编写 (animateOut)，但我需要有关代码的帮助，以根据点击在动画进出之间轻弹:

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

汉堡菜单.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. 只需在需要打开/关闭菜单时添加或删除 (open) 类