我有一个菜单,一旦按下汉堡包图标,它就会显示在当前页面的顶部,它使用 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
最佳答案
我建议另一种方法:
将菜单的默认 translateX 设置为 100%
创建一个将 translateX 设置为 0% 的类(即 open)
设置菜单的过渡属性为“transition: all 0.5s ease-in-out;”
只需在需要打开/关闭菜单时添加或删除 (open) 类
关于html - 使用 CSS 制作进出动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49155444/