JavaScriptアニメーションのスライディングメニュー

Question

ボタンをクリックしたときにメニューを開き、別のボタンをクリックすると簡単なスクリプトが閉じられます。どのようにアニメーション化できますか？私はプロパティの "移行"を試してみましたが、機能しません。ここで

は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：CSSで

<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> 

私が持っている：

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

JavaScriptのアニメーションを、私は私を得ることができないものです私はjQueryをまだ使用したくありません。私はどんな助けでも感謝しています。

Answer 1

あなたは

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>

Answer 2

あなたのメニューを切り替えるには、classList.toggle()をUSSE可能性だけでなく、純粋なJavaScriptでこのバリアントを試してみてください：https://jsfiddle.net/rinatoptimus/wwn4bxwj/ は

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

といくつかのスタイルを追加しました。