0
A
回答
1
你可以做這樣的事情。
在開始隱藏您的導航,只顯示漢堡包圖標。你可以用
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);
}
相關問題
- 1. 點擊動畫漢堡包按鈕打開和關閉導航
- 2. 從跨度創建漢堡包導航:漢堡不可見
- 3. 關閉屏幕
- 4. 更改導航抽屜漢堡包圖標
- 5. 根據BG圖像動態更改「漢堡包」導航
- 6. Bootstrap 4 Alpha中的目標漢堡包導航摺疊6
- 7. 漢堡包菜單不會與主導航菜單對齊
- 8. 安卓導航抽屜「漢堡包」不可見
- 9. 離子導航欄隱藏漢堡包圖標
- 10. bootstrap導航欄兩個「漢堡包菜單」左右
- 11. Bootstrap導航漢堡包的符號功能
- 12. 導航抽屜漢堡包圖標丟失
- 13. 導航抽屜漢堡包圖標不顯示與v7 ActionBarDrawerToggle
- 14. 將「漢堡包」與導航菜單結合起來
- 15. 單擊頁面鏈接時導航/漢堡包圖標消失
- 16. 在所有頂級屏幕標題(使用抽屜)標題中的反應導航漢堡包圖標?
- 17. 漢堡包菜單立刻展開並關閉
- 18. 如何通過點擊外部關閉漢堡包菜單
- 19. 當Codenameone中的位置關閉時,導航到設置屏幕
- 20. 關閉導航onClick屏幕的任何區域
- 21. 而屏幕關閉
- 22. Android關閉屏幕
- 23. 關閉睡眠後關閉屏幕並在屏幕上打開
- 24. 引導漢堡圖標動畫導航欄頭
- 25. 移動設備漢堡包
- 26. Oracle中的漢堡包MAF
- 27. 如何使Boostrap手機漢堡包按鈕覆蓋整個屏幕
- 28. 關閉/關閉屏幕的Android通知
- 29. 當屏幕關閉時服務關閉
- 30. 黑莓屏幕導航