JavaScript动画滑动菜单

Question

I have a simple script that opens up a menu when a button is clicked, and then clicking another button closes it. 我有一个简单的脚本，可在单击一个按钮时打开菜单，然后单击另一个按钮将其关闭。 How can I animate it? 如何制作动画？ I've tried with "transition" in property, but it's not working. 我已经尝试过在属性中进行“转换”，但是它不起作用。

Here is the JS code: 这是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);

And HTML: 和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>

In CSS I have: 在CSS中，我有：

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

JavaScript animations is something that I can't get my head around, and I don't want to use jQuery yet. JavaScript动画是我无法理解的东西，并且我现在还不想使用jQuery。 I will be thankful for any help. 感谢您的帮助。

Answer 1

You could usse classList.toggle() to toggle your menu 您可以使用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>

Answer 2

Try this variant in pure Javascript as well: https://jsfiddle.net/rinatoptimus/wwn4bxwj/ Added 也可以在纯Javascript中尝试此变体： https : //jsfiddle.net/rinatoptimus/wwn4bxwj/已添加

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

and some styles. 和一些样式。

Answer 3

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>Animation Sliding</title>
   <style>
      #box {
         width: 300px;
         height: 300px;
         background: black;
         transition: width .5s;
      }

      #box.open {
         width: 500px;
      }
   </style>
</head>

<body>
   <div id="box"></div>
   <button id="btn">Test</button>
</body>

<script lang="javasciprt">
   function haha() {
      const box = document.getElementById('box');
      box.classList.toggle('open')
   }
   const btn = document.getElementById('btn');
   btn.addEventListener('click', haha);
</script>

</html>

Without using the toggle method. 不使用切换方法。

function haha() {
   const box = document.getElementById('box');

   box.className.includes('open')
   ? box.classList.remove('open')
   : box.classList.add('open');
}
const btn = document.getElementById('btn');
btn.addEventListener('click', haha);

JavaScript动画滑动菜单

问题描述

3 个解决方案

解决方案1
0 已采纳 2017-03-16 12:55:29

解决方案2
0 2017-03-16 13:11:46

解决方案3
0 2019-07-10 11:22:28

JavaScript动画滑动菜单

问题描述

3 个解决方案

解决方案1 0 已采纳 2017-03-16 12:55:29

解决方案2 0 2017-03-16 13:11:46

解决方案3 0 2019-07-10 11:22:28

解决方案1
0 已采纳 2017-03-16 12:55:29

解决方案2
0 2017-03-16 13:11:46

解决方案3
0 2019-07-10 11:22:28