Question

我一直在尝试创建一个按钮，在菜单打开和关闭时动画。为此，我创建了一个简单的函数，用于在单击按钮时执行API.open();和API.close();。代码：

var API = $("#primary-menu").data( "mmenu" ),
      menuOpen = 0;

  $("#menu-button").click(function() {
    if(menuOpen === 0){
      API.open();
      menuOpen = 1;
    }
    else{
      API.close();
      menuOpen = 0;
    }
  });

现在问题是当菜单关闭时，按钮没有动画，点击内容区域

$(".mm-opening #mm-0").click(function(){
    console.log("Click Successful");
    $("#menu-button").removeClass("close");
  });

使用console.log方法和开发工具，我发现当我点击内容区域时点击根本没有注册，所以我无法为图标设置动画。

以下是演示：http://bwdmedia.in/camelport/vendor-panel/ 有人能解释一下这个原因吗？或另一种方法来实现相同的结果。

Answer 1

mmenu在触发菜单时在html标签.mm-opened上添加一个类，并在其关闭时将其删除，因此您可以设置一个间隔来监视html标签是否具有此类

如果你使用的是JQuery，你可以这样做。

var thread = setInterval(checkHtmlTag(),20)

    function checkHtmlTag (){
     var menuOpen;

     if ($("html").hasClass("mm-opened")){
      menuOpen = true
     } else{
       menuOpen = false
       }
    }

Answer 2

您可以按照下面提到的步骤添加动画汉堡包

图标

首先，前往这个惊人的动画汉堡包图标集，下载CSS并按照说明操作。您现在应该看到类似这样的HTML：

<button id="my-icon" class="hamburger hamburger--collapse" type="button">
   <span class="hamburger-box">
      <span class="hamburger-inner"></span>
   </span>
</button>

如果您需要修复汉堡包图标，请尝试将其包装在DIV中并使用fixedElements附加组件。

<div class="Fixed">
   <button id="my-icon" class="hamburger hamburger--collapse" type="button">
      <span class="hamburger-box">
         <span class="hamburger-inner"></span>
      </span>
   </button>
</div>

菜单

第二个（也就是最后一个），创建菜单并使用API打开菜单并为图标设置动画。添加一个小超时以确保页面的其余部分完成动画以获得更流畅的动画。

var $menu = $("#my-menu").mmenu({
   //   options
});
var $icon = $("#my-icon");
var API = $menu.data( "mmenu" );

$icon.on( "click", function() {
   API.open();
});

API.bind( "open:finish", function() {
   setTimeout(function() {
      $icon.addClass( "is-active" );
   }, 100);
});
API.bind( "close:finish", function() {
   setTimeout(function() {
      $icon.removeClass( "is-active" );
   }, 100);
});

http://mmenu.frebsite.nl/tutorials/animated-hamburger.html

在mmenu中触发关闭功能

2 个答案: