打开和关闭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

您可以使用jquery effect

要显示元素，请使用fadeIn（）；要隐藏元素，可以使用fadeOut（）

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeOut();
    $("#div3").fadeToggle();

  });
});
</script>

Answer 2

您可以使用JS完成此操作。您可以更改元素的不透明度以将其隐藏，并更改其CSS过渡属性以产生淡入淡出效果

var container = document.getElementById("container")

function clicked() {
  if (container.style.opacity == 0) {
    container.style.opacity = 1
  }
  else {
    container.style.opacity = 0
  }
}

#container {
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

<div id="container">Some Text</div>
<a href="#" onclick="clicked()">Submit</a>

Answer 3

您可以完全在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>