JavaScript动画滑动菜单_Javascript_Html_Css_Animation

JavaScript动画滑动菜单

javascript html css animation

JavaScript动画滑动菜单,javascript,html,css,animation,Javascript,Html,Css,Animation,我有一个简单的脚本，当点击一个按钮时打开一个菜单，然后点击另一个按钮关闭它。我该如何设置动画？我试过在财产中使用“过渡”，但它不起作用以下是JS代码： var menu = document.getElementById("menu"); var opener = document.getElementById("opener"); var closer = document.getElementById("closer"); var title = document.getElementBy

我有一个简单的脚本，当点击一个按钮时打开一个菜单，然后点击另一个按钮关闭它。我该如何设置动画？我试过在财产中使用“过渡”，但它不起作用

以下是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>

JavaScript动画是我无法理解的东西，我还不想使用jQuery。我将非常感谢您的帮助。

您可以使用

classList.toggle（）

切换菜单

const menu=document.querySelector（'.menu'）；
常量触发器=document.querySelector（'.trigger'）；
函数切换（）{
menu.classList.toggle（'menu--open'）；
}
trigger.addEventListener（'click'，toggle'）
正文{
保证金：0；
}
.菜单{
框大小：边框框；
左边距：-320px；
宽度：320px；
背景色：#CCC；
过渡：全部3秒；
填充：1rem；
}
.菜单--打开{
左边距：0；
}
a{
颜色：#FFF；
显示：块；
}
菜单
您可以使用classList.toggle（）
切换菜单

const menu=document.querySelector（'.menu'）；
常量触发器=document.querySelector（'.trigger'）；
函数切换（）{
menu.classList.toggle（'menu--open'）；
}
trigger.addEventListener（'click'，toggle'）
正文{
保证金：0；
}
.菜单{
框大小：边框框；
左边距：-320px；
宽度：320px；
背景色：#CCC；
过渡：全部3秒；
填充：1rem；
}
.菜单--打开{
左边距：0；
}
a{
颜色：#FFF；
显示：块；
}
菜单
也可以在纯Javascript中尝试此变体：
增加
还有一些样式。也可以在纯Javascript中尝试此变体：
<!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>

增加
和一些样式。
你可以使用类，并将边距从-320px
设置为0px
动画。我想制作两个带有关键帧的类，并使用JS添加或删除它们，但我希望有一种更简单的方法来设置“宽度”动画。请看我回答中的示例，希望这对你有所帮助。你可以使用类，并将边距从-320px
设置为0px动画。我想制作两个带有关键帧的类，并使用JS添加或删除它们，但我希望有一种更简单的方法来设置“宽度”的动画。看看我回答中的示例，希望这对你有帮助，伙计基本上和我的一样；）哥们，基本上和我的一样；）
<!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>

<!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);