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动画滑动菜单

回答

相关问题