使用 jQuery 的 CSS3 动画

Question

这是一个有点远的镜头，但这里是 - 我是 css3 动画的新手，所以请光顾..

Codepen link

	$(document).ready(function(){
				$("#menu").mmenu({
					extensions 	: [ "theme-dark", "effect-slide-menu", "effect-slide-listitems" ],
					iconPanels	: {
						add 		: true,
						visible		: 1,
						hideNavbars	: true
					}
					
					})
				
	
		
		
	        $("#hamburger").click(function(){
	           $(".burger .one, .burger .two, .burger  .three, .circle").css("-webkit-animation-play-state", "running");
	       });
		});	

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/jquery.mmenu.all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
	         <div class="header">
	            
		       <a href="#menu" id="hamburger">

					  <div class="burger">
					    <div class="one"></div>
					    <div class="two"></div>
					    <div class="three"></div>
					  </div>
					
					  <div class="circle"></div>
				
				</a>
	            Demo
	         </div>
	         <div class="content">
	            <p><strong>This is a demo.</strong><br />
	               Click the menu icon to open the menu.</p>
	         </div>
	      </div>
      
      <!-- The page End-->
      
			  <!-- The menu -->
		  <nav id="menu">
	         <ul>
	            <li><a href="/">Home</a></li>
	            <li><a href="/about">About us</a>
	               <ul>
	                  <li><a href="/about/history">History</a></li>
	                  <li><a href="/about/team">The team</a></li>
	                  <li><a href="/about/address">Our address</a></li>
	               </ul>
	            </li>
	            <li><a href="/contact">Contact</a></li>
	         </ul>

当汉堡菜单打开时，动画在图标上开始，但当您关闭它时，动画保持在打开状态。我想让它恢复到原来的状态

提前致谢

Answer 1

使用 mm-blocker 的 mousedown 事件重置之前的样式。我使用动画方向反转来做到这一点。这是代码笔http://codepen.io/anon/pen/gpoPqQ

     $("#mm-blocker").on( "mousedown",function(){
     $(".burger .one, .burger .two, .burger  .three, .circle").css("-webkit-animation-direction", "normal");
    } );


        $("#hamburger").click(function(){
        $(".burger .one, .burger .two, .burger  .three, .circle").css("-webkit-animation-direction", "reverse");
        $(".burger .one, .burger .two, .burger  .three, .circle").css("-webkit-animation-direction", "running");

       });