关闭屏幕汉堡包导航
问题描述:
答
你可以做这样的事情。
在开始隐藏您的导航,只显示汉堡包图标。你可以用
transform: translateX()
来完成。您可以使用display: none
,但display: none
您不能制作动画。然后点击汉堡图标将状态更改为
true
(取决于状态值,我们将渲染一个类来显示导航)。-
然后渲染VAR(例如
open
),这将是空的,如果this.state.open
为假(NAV DIV将仅具有nav
类)let open = this.state.open ? "open" : "";
并且如果
this.state.open
是真,则var open将是open
(nav div将有两个类nav
和open
)。
你可以做这样的事情:
class Test extends React.Component {
constructor(props){
super(props);
this.state = {
open: false
}
}
toggleNav(){
this.setState({open: !this.state.open});
}
render(){
let open = this.state.open ? "open" : "";
return (
<div>
<div className={`nav ${open}`}>
<div className="icon">
<img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" onClick={this.toggleNav.bind(this)}/>
</div>
</div>
</div>
)
}
}
React.render(<Test />, document.getElementById('container'));
并添加CSS如下:
.nav{
width: 200px;
height: 800px;
background-color: yellow;
position: relative;
transform: translateX(-208px);
transition: all 1s ease-out;
}
.icon img{
width: 50px;
position: absolute;
right: -50px;
}
.open{
transform: translateX(0);
}