切换时如何在javascript和css中过渡到"hidden"

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

试一下

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>

Answer 2

既然您已经在使用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 3

您正在使用jQuery，但由于某种原因，您试图手动执行。你有多个jQuery函数为你做这些。

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

这单独将隐藏和显示您的元素与默认动画。您可以使用http://api.jquery.com/toggle/

进一步定制它

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