JavaScript動畫滑動菜單

我有一個簡單的腳本，在單擊按鈕時打開菜單，然後單擊另一個按鈕將其關閉。我如何製作動畫？我已經嘗試過使用屬性中的「過渡」，但它不起作用。JavaScript動畫滑動菜單

這裏是JS代碼：

var menu = document.getElementById("menu"); 
var opener = document.getElementById("opener"); 
var closer = document.getElementById("closer"); 
var title = document.getElementById("title"); 

function openMenu() { 
    menu.style.width = "320px"; 
    menu.style.display = "block"; 
    title.style.display = "none"; 
} 
function closeMenu() { 
    menu.style.width = "0"; 
    menu.style.display = "none"; 
    title.style.display = "block"; 
} 

opener.addEventListener("click", openMenu); 
closer.addEventListener("click", closeMenu);

和HTML：

<div id="title" class="title col-xs-12"> 
     <span id="opener" class="title__opener icon-menu"></span> 
     <h4><strong>...</strong></h4> 
    </div> 
    <section id="menu" class="menu-panel col-xs-12 col-sm-3"> 
     <h1><a href="index.html">...</a></h1> 
     <span id="closer" class="menu-panel__closer icon-cancel"></span> 
     <nav class="menu-panel__nav"> 
      <ul class="menu-panel__menu"> 
       <li><button id="allItems">Wszystkie prace</button></li> 
       <li><button id="drawings">Rysunki</button></li> 
       <li><button id="projects">Projekty</button></li> 
       <li><ul class="menu-panel__contact"> 
        <li><p class="menu-panel__header">Kontakt :</p></li> 
        <li><a href="tel:..."><span class="icon-phone"></span>...</a></li> 
        <li><a href="mailto:..."><span class="icon-mail-alt"></span>...</a></li> 
       </ul></li> 
      </ul> 
     </nav> 
     <footer class="menu-panel__footer"> 
      <a href="">&copy; 2017 </a> 
     </footer> 
    </section>

在CSS我：

.menu-panel { 
    overflow: hidden; 
    width: 0; 
    display: none; 
    transition: 0.3s all;}

的JavaScript動畫的東西，我不能讓我的頭，並且我不想使用jQuery。我會感謝任何幫助。

來源

2017-03-16 grhu

你可以使用類和動畫從'-320px'到'0px'的邊距 – GOB

我在考慮用關鍵幀製作2個類並使用JS添加或刪除它們，但我希望有一個更簡單的方法來動畫只是「寬度」。 – grhu

看看我的答案中的例子，希望這可以幫助你 – GOB

你可以USSE classList.toggle()切換你的菜單

const menu = document.querySelector('.menu'); 
 
const trigger = document.querySelector('.trigger'); 
 

 
function toggle() { 
 
    menu.classList.toggle('menu--open'); 
 
} 
 

 
trigger.addEventListener('click', toggle);

body { 
 
    margin: 0; 
 
} 
 

 
.menu { 
 
    box-sizing: border-box; 
 
    margin-left: -320px; 
 
    width: 320px; 
 
    background-color: #CCC; 
 
    transition: all .3s; 
 
    padding: 1rem; 
 
} 
 

 
.menu--open { 
 
    margin-left: 0; 
 
} 
 

 
a { 
 
    color: #FFF; 
 
    display: block; 
 
}

<div class="trigger">Menu</div> 
 
<div class="menu"> 
 
    <a href="#">1</a> 
 
    <a href="#">2</a> 
 
    <a href="#">3</a> 
 
</div>

來源

2017-03-16 12:55:29 GOB

嘗試在純JavaScript這個變體，以及：https://jsfiddle.net/rinatoptimus/wwn4bxwj/ 新增

function test() { 
    document.getElementById('menu').classList.toggle('menu-panel'); 
} 
document.getElementById('opener').addEventListener("click", test);

和一些風格。

來源

2017-03-16 13:11:46 rinatoptimus

夥計們，基本上和我一樣;） – GOB

JavaScript動畫滑動菜單

回答

相關問題