如何在点击时使用动画 CSS？

Question

我很难弄清楚如何让我的移动菜单图标在点击时进行动画处理。如果我可以单击菜单图标并且菜单将使用 animate.css fadeInDown 滑入，然后再次单击以退出菜单（如果它使用 animate.css fadeOutUp），那将是理想的选择。有没有办法使用JS来做到这一点？我真的很想学习。

这里是html：

<header>
<div id="pic-1">
<img id="top" src="css/Unknown.png" class="log animated fadeInDown">
<nav>
<a class="burger-nav animated fadeInDown"><i class="fas fa-bars"></i> 
</a>
<ul class="li animated fadeInDown">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Contact Us</a></li>
<li><a>Volunteer</a></li>
</ul>
</nav> 
</div>
</header>

这是 CSS（媒体查询）：

/* Mobile 1 */ 
@media only screen and (min-width : 320px) {} 
.checkBox {
display: none;
}
.logo {
display: none;
}
.log {
position: fixed;
z-index: 999;
left: -2%;
height: 10%;
width: 35%;
padding-top: 2%;
padding-right: 33%;
padding-left: 33%;
border: solid white;
background-color: white;
}
.burger-nav {
position: fixed;
z-index: 999;
left: 85%;
top: 1%;
font-size: 300%;
}
header nav ul {
overflow: hidden;
height: 0; 
margin-top: 70px; 
width: 100%;
margin-left: -40px;
position: fixed;
z-index: 999;
}
header nav ul.open {
height: auto;
}
header nav ul li {
text-align: center;
width: 100%;
margin: 0;
list-style-type: none;
font-family: Jazz LET, fantasy;
font-size: 17px;
word-spacing: 7px;
letter-spacing: 5px;
font-weight: bold;
}
header nav ul li a:hover {

}
header nav ul li a {
color: #FF6103;
padding: 10px;
border-bottom: 1px solid white;
display: block;
background-color: black;
opacity: .5;
}
.li {
-webkit-animation-duration: 1s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-duration: 1s;
-moz-animation-delay: 1s;
-moz-animation-iteration-count: 1;
-o-animation-duration: 1s;
-o-animation-delay: 1s;
-o-animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: 1;
}
.fas {
color: purple;
}
#pic-1 {
background-size: 120% 100%;
}
#pic-2 {
background-size: 123% 100%;
}
#pic-3 {
background-size: 120% 100%;
}
.social {
display: none;
}
.circle {
display: none;
}
}

这是我用过的一些 JS：

$(document).ready(function(){ 
$(".burger-nav").on("click", function(){
$("header nav ul").toggleClass("open")
}); 
}); 

希望有人能帮忙！谢谢！

Answer 1

CSS 动画有点棘手。但没有什么是解决不了的。首先你应该使用@keyframes。可以在here 找到一个很好的解释。诀窍是切换两个类（.open 和.close），它们将处理您的打开和关闭动画。重要的是 animation-fill-mode 属性可以让您的动画保持其最终状态。你也不能使用height: auto;，因为它需要是一个真实的价值。 max-height: 1000px; 会成功的。所以你从max-height: 0; 到max-height: 1000px; 进行动画处理，反之亦然。这是您作为可运行 sn-p 的简化代码：

$(document).ready (function() { 
  $('.burger-nav').on ('click', function () {
  
    //check if class open is already set then toggle
    if ($('header nav ul').hasClass ('open'))
      $('header nav ul').toggleClass ('close open');
    else {
      $('header nav ul').removeClass ('close');
      $('header nav ul').addClass ('open');
    }
    
  }); 
});

header nav ul {
  overflow: hidden;
  max-height: 0;       //<-- this needs to be changed
  margin-top: 70px; 
  width: 100%;
  margin-left: -40px;
  position: fixed;
  z-index: 999;
}

header nav ul li {
  text-align: center;
  width: 100%;
  margin: 0;
  list-style-type: none;
  font-family: Jazz LET, fantasy;
  font-size: 17px;
  word-spacing: 7px;
  letter-spacing: 5px;
  font-weight: bold;
}

header nav ul li a {
  color: #FF6103;
  padding: 10px;
  border-bottom: 1px solid white;
  display: block;
  background-color: black;
  opacity: .5;
}

.li {
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-duration: 1s;
  -moz-animation-delay: 1s;
  -moz-animation-iteration-count: 1;
  -o-animation-duration: 1s;
  -o-animation-delay: 1s;
  -o-animation-iteration-count: 1;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: 1;
}

header nav ul.open {
  animation-name: open;
  animation-name: open;
  animation-fill-mode: forwards;
}

@keyframes open {
    from {max-height: 0;}
    to {max-height: 1000px;}
}

header nav ul.close {
  animation-name: close;
  animation-name: close;
  animation-fill-mode: both;
}

@keyframes close {
    from {max-height: 1000px;}
    to {max-height: 0;}
}

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

<header>
  <nav>
    <a href="javascript: void (0);" class="burger-nav animated fadeInDown">click_me</a>
    <ul class="li animated fadeInDown">
      <li><a>Home</a></li>
      <li><a>About Us</a></li>
      <li><a>Contact Us</a></li>
      <li><a>Volunteer</a></li>
    </ul>
  </nav>
</header>