How do I use animate css on click? - animate.css

Question

I am having a hard time figuring out how to have my mobile menu icon animate on click. It would be ideal if I could click the menu icon and the menu would just slide in using animate.css fadeInDown and then when clicked again to exit the menu if it used animate.css fadeOutUp. Is there any way to do this using JS too? I really want to learn.
Here is the 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>
Here is the CSS (media queries):
/* 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;
}
}
And here is some JS I've used:
$(document).ready(function(){
$(".burger-nav").on("click", function(){
$("header nav ul").toggleClass("open")
});
});
I hope someone can help! Thank you!

Answer 1

Well css-animations are a bit tricky. But nothing that can't be solved. First of all you should use #keyframes. A good explanation can be found here. The trick is to toggle two classes (.open and .close) which will handle your opening and closing animation. Important is the animation-fill-mode attribute to keep your animation sticking with it's final state. Also you can not use height: auto; because it needs to be a real value. max-height: 1000px; will do the trick. So you animate from max-height: 0; to max-height: 1000px; and vice versa. Here is your simplified code as a runnable snippet:
$(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>
click_me
<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>