javascript - 打开和关闭 Div 元素时添加动画

Question

我有这个带有菜单链接 (#navBtn) 和 #mobileLinks div 的页面，它在单击 #navBtn 时打开和关闭。

我想在 #mobileLinks div 打开时添加淡入动画，在 #mobileLinks div 关闭时添加淡出动画。我想用纯 JavaScript 来实现这一点。

我已经成功地插入了淡入动画，但不知道如何添加淡出动画。

var content = document.getElementById("mobileLinks");
var button = document.getElementById("navBtn");

button.onclick = function(){

  if(content.className == "open"){
    content.className = "";
    content.animate([{opacity:'0.0'}, {opacity:'1.0'}],
    {duration: 1500, fill:'forwards'})
  } else{
    content.className = "open";
  }
};

#navBtn

#mobileLinks {
  display: none
}

#mobileLinks.open {
  display: flex;
}

Answer 1

您可以完全在 CSS 中处理样式，并且只用 Js 切换一个类。

使用 CSS 和 Js

const menu = document.getElementById("menu")

function toggleMenu() {
  menu.classList.toggle("isOpen");
}

#menu {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

#menu.isOpen {
  opacity: 1;
}

<a onClick="toggleMenu()">menu</a>

<nav id="menu">
  <a>link</a>
  <a>link</a>
</nav>

或仅使用 JS

const menu = document.getElementById("menu")

menu.style.opacity = '0'
menu.style.transition = "opacity 0.2s ease-out"

function toggleMenu() {
  // Toggle between 0 and 1
  menu.style.opacity ^= 1;
}

<a onClick="toggleMenu()">menu</a>

<nav id="menu">
  <a>link</a>
  <a>link</a>
</nav>