創建動畫滑動菜單

Question

我想創建一個慢速滑入式右側菜單（ <div id="sidebar"> ）滑入並在單擊按鈕時消失（ id="menuicon" ）。

打開按鈕（ <div id="openmenuicon"> ）本身（由多個圖像組成）必須以相同的動畫持續時間消失。

同時必須出現一個關閉按鈕（ <div id="closemenuicon"> ）（也是動畫的）。

在較小的屏幕（最大寬度 768px）上，滑動菜單必須從底部滑入。 同樣在同一屏幕寬度上，另一個 div 容器（ <div id="footerbackground">​​ ）必須（非動畫）出現在頁面的不同位置。

我的代碼確實有效，但當然不是像上面描述的那樣動畫。 我是 javascript 新手，不知道我在做什么。 如果你能幫助我，我會很高興。

這是我最近的嘗試：

 function multipleMenu() { openSidebar(); swapButtons(); openFooterbackground(); } function openSidebar() { var x = document.getElementById("sidebar"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } function swapButtons() { if (document.getElementById("openmenuicon")) { if (document.getElementById("openmenuicon").style.display == "none") { document.getElementById("openmenuicon").style.display = 'block'; document.getElementById("closemenuicon").style.display = "none"; } else { document.getElementById("openmenuicon").style.display = "none"; document.getElementById("closemenuicon").style.display = "block"; } } } function openFooterbackground() { var x = document.getElementById("footerbackground"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }

 /* --------------------------------- nav icon images ----------------------------------*/ #navmenutransp { position: fixed; top: 85%; left: calc(50% - 32px); cursor: pointer; transition: 0.3s; z-index: 300; opacity: 0; } #navmenutransp:hover { opacity: 1; } @media (pointer:coarse) { #navmenutransp:hover { opacity: 0; } } #navmenutranspbackground { position: fixed; top: 85%; left: calc(50% - 32px); z-index: 290; opacity: 0.2; } #navmenutranspbackground2 { position: fixed; top: 85%; left: calc(50% - 32px); z-index: 292; opacity: 1; } #navclosetransp { position: fixed; top: 85%; left: calc(50% - 32px); cursor: pointer; z-index: 300; opacity: 0.8; } @media only screen and (max-width: 768px) { #navclosetransp { opacity: 0; } } #navclosetranspbackground { position: fixed; top: 85%; left: calc(50% - 32px); z-index: 299; opacity: 1; } @media only screen and (orientation: landscape) and (max-width: 1024px) { #navmenutransp, #navmenutransp:hover, #navmenutranspbackground, #navmenutranspbackground2, #navclosetransp, #navclosetranspbackground { top: 78%; } } /* --------------------------------- nav icon + menu bar ----------------------------------*/ #menuicon {} #openmenuicon { z-index: 295; } #closemenuicon { display: none; z-index: 305; } @media only screen and (min-width: 769px) { #sidebar { display: none; position: fixed; width: 250px; height: 100%; right: 0px; padding-top: 0px; background-color: rgba(15, 15, 15, 0.8); overflow: auto; z-index: 200 } } @media only screen and (max-width: 768px) { #sidebar { display: none; position: fixed; width: 100%; height: 413px; right: 0px; bottom: 0; background-color: rgba(15, 15, 15, 0.8); overflow: auto; z-index: 200 } } @media only screen and (min-width: 769px) { #footerbackground { display: none; z-index: 5 } } @media only screen and (max-width: 768px) { #footerbackground { display: none; position: absolute; top: 115%; padding-top: 84px; height: 330px; bottom: 0; width: 100%; background-color: rgb(15, 15, 15); z-index: 5 } } #navitems { margin: 0; padding: 0; border-bottom: 1px solid rgba(70, 70, 70, 1); } .linav { list-style: none; font-family: Overpass-Light, sans-serif; color: white; font-size: 20px; padding: 24px; border-top: 1px solid rgba(70, 70, 70, 1); text-align: center; } .navlink { color: white; text-decoration: none; transition: 0.3s ease; } .navlink:hover { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: white; transition: 0.3s ease; } @media (pointer:coarse) { .navlink:hover { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: white; transition: 0.3s ease; } }

 <div id="menuicon" href="javascript:void(0);" class="icon" onclick="multipleMenu()"> <div id="openmenuicon"> <img id="navmenutranspbackground" src="1.png" width="64" height="64"> <img id="navmenutranspbackground2" src="2.png" width="64" height="64"> <img id="navmenutransp" src="3.png" width="64" height="64" alt="Menu"> </div> <div id="closemenuicon"> <img id="navclosetranspbackground" src="4.png" width="64" height="64"> <img id="navclosetransp" src="5.png" width="64" height="64" alt="Close Menu"> </div> <div id="sidebar"> <ul id="navitems"> <li class="linav"><a class="navlink" href="https://">Topic 1</a></li> <li class="linav"><a class="navlink" href="https://">Topic 2</a></li> <li class="linav"><a class="navlink" href="https://">Topic 3</a></li> <li class="linav"><a class="navlink" href="https://">Topic 4</a></li> </ul> </div> </div> <div id="footerbackground"></div> <!-- display only for screen max-width 769px -->

Answer 1

您不能為display屬性設置動畫。 你應該使用另一種方法。 例如設置隱藏和顯示的width 。 或使用opacity和visibility 。 為了獲得更好的結果，通過添加和刪除類而不是使用 JS 樣式來隱藏和顯示您的元素。

更新：也許這可以幫助你..

https://codepen.io/navab/pen/ExQqLbN

https://codepen.io/navab/pen/dydxexj