如何在点击时使用动画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-animations有点棘手。但没有什么是无法解决的。首先，您应该使用.open。可以找到一个很好的解释here。诀窍是切换两个类（.close和height: auto;），它们将处理您的开始和结束动画。重要的是animation-fill-mode属性，以保持动画与其最终状态保持一致。此外，您无法使用max-height: 1000px;，因为它需要是真正的价值。 max-height: 0;会做到这一点。因此，您可以从max-height: 1000px;动画到$(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'); } }); });，反之亦然。以下是您的简化代码作为可运行的代码段：

＆＃13;

＆＃13;

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;}
}

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;