切换时如何在javascript和css中转换为“隐藏”

Question

我试图在按下某个按钮时显示一个 div，并让它在 .hidden 类（隐藏 div）之间切换。我试图通过添加过渡来制作动画，但由于某种原因，它被隐藏的事实以某种方式破坏了这一点。简而言之，我想知道是否有一种方法可以为隐藏状态和可见状态之间的过渡设置动画。

var main = function() {

  $("#myMenu").css("height", window.innerHeight);
  $("#myMenu").css("width", window.innerWidth);

}


$(document).ready(main);

.toggle {
  font-size: 20px;
  margin: 20px;
  margin-top: 30px;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
}
.hidden {
  visibility: none;
  display: none;
}
.menu {
  background-color: red;
  position: fixed;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--contains hamburger-->
<div class="toggle">
  <a id="tButton" href="javascript:void(0);" onclick="toggleNav()">&#9776;</a>
</div>

<!--actual mobile menu-->
<div id="myMenu" class="menu hidden">
  <ul>
    <li><a onclick="toggleNav()">Home</a>
    </li>
    <li><a onclick="toggleNav()">Events</a>
    </li>
    <li><a onclick="toggleNav()">About</a>
    </li>
    <li><a onclick="toggleNav()">Volunteer</a>
    </li>
    <li><a onclick="toggleNav()">Contact</a>
    </li>

  </ul>

</div>

<script>
  function toggleNav() {
    $("#myMenu").toggleClass("hidden");
    if ($("#myMenu").hasClass("hidden")) {
      $("#tButton").text(String.fromCharCode(9776));

    } else {
      $("#tButton").text(String.fromCharCode(10005));
    }
  }
</script>

Answer 1

由于您已经在使用 jQuery，您可以让库为您完成繁重的工作。

fadeIn()、fadeOut() 和 fadeToggle() 将为您提供帮助：

$('#my-div').hide();

function show() {
  $('#my-div').fadeToggle();
}

#my-div {
  width: 100px;
  height: 100px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick='show()'>Toggle</button>
<div id='my-div'></div>

Answer 2

您正在使用 jQuery，但出于某种原因，您尝试手动执行此操作。 您有多个 jQuery 函数可以为您执行此操作。

$("#myMenu").toggle();

仅此一项就会使用默认动画隐藏和显示您的元素。 您可以通过http://api.jquery.com/toggle/进一步自定义它

您还可以使用其他方法，例如 fadeToggle（或单独使用 fadeIn 和 fadeOut）和 slideToggle 方法。 包括 hide 和 show 方法......隐藏或显示您的元素......（因此不需要 .hidden css 类）

Answer 3

试试这个。

if ($("#myMenu").hasClass("hidden")) {
      $("#tButton").text(String.fromCharCode(9776));

       $("#myMenu").fadeIn()
        $("#myMenu").removeClass('hidden');
    } else {
      $("#myMenu").addClass('hidden');
         $("#myMenu").fadeOut();
      $("#tButton").text(String.fromCharCode(10005));
    }

完整演示

var main = function() {

  $("#myMenu").css("height", window.innerHeight);
  $("#myMenu").css("width", window.innerWidth);

}


$(document).ready(main);

.toggle {
  font-size: 20px;
  margin: 20px;
  margin-top: 30px;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
}
.hidden {
  visibility: none;
  display: none;
}
.menu {
  background-color: red;
  position: fixed;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--contains hamburger-->
<div class="toggle">
  <a id="tButton" href="javascript:void(0);" onclick="toggleNav()">&#9776;</a>
</div>

<!--actual mobile menu-->
<div id="myMenu" class="menu hidden">
  <ul>
    <li><a onclick="toggleNav()">Home</a>
    </li>
    <li><a onclick="toggleNav()">Events</a>
    </li>
    <li><a onclick="toggleNav()">About</a>
    </li>
    <li><a onclick="toggleNav()">Volunteer</a>
    </li>
    <li><a onclick="toggleNav()">Contact</a>
    </li>

  </ul>

</div>

<script>
  function toggleNav() {
  
    if ($("#myMenu").hasClass("hidden")) {
      $("#tButton").text(String.fromCharCode(9776));
     
       $("#myMenu").fadeIn();
        $("#myMenu").removeClass('hidden');
    } else {
      $("#myMenu").addClass('hidden');
         $("#myMenu").fadeOut();
      $("#tButton").text(String.fromCharCode(10005));
    }
  }
</script>