单击按钮时如何使ul按钮文本淡入和淡出？

Question

快速提问，如何使用Javascript使我的Ul按钮缓慢出现（单击菜单按钮时）。这是我到目前为止的内容：

基本上，当菜单扩展导航功能被调用时，我希望li标记缓慢出现/消失。我该怎么办？这只是我脚本的一小段，因为它很多。

谢谢！

setup();

function setup() {
  document.getElementById("extend-nav-container").style.display = "none";
}

function expandNav() {
  if (document.getElementsByTagName("body")[0].style.overflow === "hidden") {
    document.getElementById("extend-nav").style.height = "0px";
    document.getElementsByTagName("body")[0].style.overflow = "";
    document.getElementById("extend-nav-container").style.display = "none";
  } else {
    document.getElementById("extend-nav").style.height = "100vh";
    document.getElementsByTagName("body")[0].style.overflow = "hidden";
    document.getElementById("extend-nav-container").style.display = "";
    document.getElementById('fadeout').style.opacity = '0';
  }
}

function myFunction(x) {
  document.getElementById("extend-nav").style.height = "0px";
  document.getElementsByTagName("body")[0].style.overflow = "";
  document.getElementById("extend-nav-container").style.display = "none";
}

var x = window.matchMedia("(max-width: 768px)")
myFunction(x);
x.addListener(myFunction);

.new-nav {
  background: black;
  display: flex;
  transition: 0.5s;
  justify-content: center;
}

.new-nav .container {
  width: 98%;
  height: 98%;
  transition: 0.5s;
}

#extend-nav ul {
  list-style-type: none;
  height: 100%;
  transition: 1s;
}

#extend-nav li {
  margin-bottom: 10px;
}

#extend-nav a {
  text-decoration: none;
  color: white;
  font-weight: lighter;
  transition: 0.5s;
}

<div class="new-nav" id="extend-nav">
  <div class="container" id="extend-nav-container">
    <ul id="second-nav-ul">
      <li><a href="#">Home</a></li>
      <li><a href="#">Ban</a></li>
      <li><a href="#">Warn</a></li>
      <li><a href="#">Gift</a></li>
      <li><a href="#">Records</a></li>
      <li><a href="#">Moderator</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Edit</a></li>
      <li><a href="#">Account</i></a></li>
      <li><a href="#">Sign Out</a></li>
    </ul>
  </div>
</div>

Answer 1

当用户点击您的汉堡包或菜单上的某处时，您可以使用javascript切换课程。

Display: none不能具有过渡效果，因此您需要使用visibility属性。

function myFunction() {
    var element = document.getElementById("second-nav-ul");
    element.classList.toggle("collapse");
}

.nav {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #000;  
  height: 50px;
}

ul li a {
  color: #FFF;
}

.collapse {
  height: 0px;
  padding: 0px;
  visibility: hidden;
  transition:all 0.1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-nav" id="extend-nav">
  <button onclick="myFunction()">Toggle Me</button>
  <div class="container" id="extend-nav-container">
    <ul id="second-nav-ul" class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Ban</a></li>
      <li><a href="#">Warn</a></li>
      <li><a href="#">Gift</a></li>
      <li><a href="#">Records</a></li>
      <li><a href="#">Moderator</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Edit</a></li>
      <li><a href="#">Account</a></li>
      <li><a href="#">Sign Out</a></li>
    </ul>
  </div>
</div>

Answer 2

尝试

#extend-nav{
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s; }