这个镜头有点长,但这里是 - 我是 css3 动画新手,所以请裸露......
$(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>
当汉堡菜单打开时,动画在图标上开始,但当您关闭它时,动画保持在打开状态。我想让它恢复到原来的状态
提前致谢
最佳答案
使用 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");
});
关于jquery - CSS3 动画与 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31077907/