Question

我有一个简单的脚本，当单击按钮时打开菜单，然后单击另一个按钮将其关闭。我怎样才能为它制作动画？我已尝试过＆＃34;过渡＆＃34;在财产，但它没有工作。

这是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。我会感谢任何帮助。

Answer 1

您可以使用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

在纯Javascript中尝试此变体：https://jsfiddle.net/rinatoptimus/wwn4bxwj/ 添加了

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

和一些风格。

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>

不使用切换方法。

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 个答案: