问题

我正在尝试制作菜单的动画效果。菜单的打开动画运行正常，但我无法让菜单关闭动画生效。

菜单成功打开，但我不知道如何使用MenuClose设置来关闭它。

<input id="MenuButton" type="button" value="Menu" onclick="showMenu();" title="Menu" />
<div id="MenuContainer"></div>

function showMenu() {
  const el = document.getElementById("MenuContainer");
  el.classList.toggle('MenuOpen');
}

#MenuContainer {
  height: 0px;
  left: 10px;
  overflow: hidden;
  padding: 5px 0px 0px 0px;
  position: relative;
  top: 20px;
  width: 0px;
}

.MenuOpen {
  animation-direction: normal;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-name: Menu;
}

.MenuClose {
  animation-direction: reverse;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: Menu;
}

@keyframes Menu {
  from {
    height: 0px;
    width: 0px;
  }
  to {
    height: 100px;
    width: 300px;
  }
}

function showMenu() {
  const el = document.getElementById("MenuContainer");
  el.classList.toggle('MenuOpen');
}

#MenuContainer {
  height: 0px;
  left: 10px;
  overflow: hidden;
  padding: 5px 0px 0px 0px;
  position: relative;
  top: 20px;
  width: 0px;
}

.MenuOpen {
  animation-direction: normal;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-name: Menu;
}

.MenuClose {
  animation-direction: reverse;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: Menu;
}

@keyframes Menu {
  from {
    height: 0px;
    width: 0px;
  }
  to {
    height: 100px;
    width: 300px;
  }
}

<input id="MenuButton" type="button" value="Menu" onclick="showMenu();" title="Menu" />
<div id="MenuContainer"></div>

答案1

得分: 1

以下是翻译好的部分：

2个主要要点：

• 通过切换 MenuOpen 来... 什么也不做，它会打开菜单并关闭它。
• 最好有打开动画和关闭动画，更容易控制。

function showMenu() {
  const el = document.getElementById("MenuContainer");
  if (el.classList.contains('MenuOpen')) {
    el.classList.add('MenuClose');
    el.classList.remove('MenuOpen');
  } else {
    el.classList.add('MenuOpen');
    el.classList.remove('MenuClose');
  }
}

#MenuContainer {
  height: 0px;
  left: 10px;
  overflow: hidden;
  padding: 5px 0px 0px 0px;
  position: relative;
  top: 20px;
  width: 0px;
  background-color: #3388ff;
}

.MenuOpen {
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-name: MenuOpen;
}

.MenuClose {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: MenuClose;
}

@keyframes MenuOpen {
  from {
    height: 0px;
    width: 0px;
  }
  to {
    height: 100px;
    width: 300px;
  }
}

@keyframes MenuClose {
  from {
    height: 100px;
    width: 300px;
  }
  to {
    height: 0px;
    width: 0px;
  }
}

<input id="MenuButton" type="button" value="Menu" onclick="showMenu();" title="Menu" />
<div id="MenuContainer"></div>

function showMenu() {
  const el = document.getElementById("MenuContainer");
  if (el.classList.contains('MenuOpen')) {
    el.classList.add('MenuClose');
    el.classList.remove('MenuOpen');
  } else {
    el.classList.add('MenuOpen');
    el.classList.remove('MenuClose');
  }
}

#MenuContainer {
  height: 0px;
  left: 10px;
  overflow: hidden;
  padding: 5px 0px 0px 0px;
  position: relative;
  top: 20px;
  width: 0px;
  background-color: #3388ff;
}

.MenuOpen {
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-name: MenuOpen;
}

.MenuClose {
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: MenuClose;
}

@keyframes MenuOpen {
  from {
    height: 0px;
    width: 0px;
  }
  to {
    height: 100px;
    width: 300px;
  }
}

@keyframes MenuClose {
  from {
    height: 100px;
    width: 300px;
  }
  to {
    height: 0px;
    width: 0px;
  }
}

<input id="MenuButton" type="button" value="Menu" onclick="showMenu();" title="Menu" />
<div id="MenuContainer"></div>

答案2

得分: 0

你可以使用if else语句和replace函数来切换打开和关闭动画。

// 获取菜单容器
const el = document.getElementById("MenuContainer");

// 切换菜单的打开/关闭动画的函数
function showMenu() {
  // 检查菜单容器是否包含"MenuOpen"类
  if (el.classList.contains('MenuOpen')) {
    // 用"MenuClose"类替换"MenuOpen"类
    el.classList.replace('MenuOpen', 'MenuClose');
  } else {
    // 将"MenuOpen"类添加到菜单容器
    el.classList.add('MenuOpen');
  }
}

希望这有所帮助。这只是众多解决方案中的一个。

<details>
<summary>英文:</summary>

You can use if else statement and replace function to toggle the open close animation. 

    //Get the menu container
    const el = document.getElementById(&quot;MenuContainer&quot;);
    
    // Function to toggle the menu open/close animation
    function showMenu() {
      // Check if the menu container has the &#39;MenuOpen&#39; class
      if (el.classList.contains(&#39;MenuOpen&#39;)) {
        // Replace the &#39;MenuOpen&#39; class with &#39;MenuClose&#39;
        el.classList.replace(&#39;MenuOpen&#39;, &#39;MenuClose&#39;);
      } else {
        // Add the &#39;MenuOpen&#39; class to the menu container
        el.classList.add(&#39;MenuOpen&#39;);
      }
    }

Hope this will help. This is just one solution of many ways.


</details>