使用 CSS 动画进出

Posted 2023-03-06

【中文标题】使用 CSS 动画进出

【英文标题】：Animating In and Out with CSS

【发布时间】：2018-08-15 18:19:32

【问题描述】：

我有一个菜单，一旦按下使用 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

【问题讨论】：

值得关注github.com/reactjs/react-transition-group，因为它将元素保留在 DOM 中，以便它们在卸载时可以动画出来。

【参考方案1】：

我建议另一种方法：

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

创建一个将 translateX 设置为 0% 的类（即打开）

将菜单的transition属性设置为“transition: all 0.5s ease-in-out;”

只需在需要打开/关闭菜单时添加或删除（打开）类

【讨论】：

除了使用transition: transform 0.6s ease-out;（没有区别，只是个人风格），这正是我将如何处理这个问题。