Question

我被我得到的动画遗留下来，基本上我在导航按钮上设置了一个类，当菜单可见时，它会将它从三个引脚转换为x。

问题是当你垃圾邮件点击按钮时，尽管菜单不在屏幕上，x类仍然可以激活。这很可能是由stop()函数引起的，因为它取消了动画。

这是我到目前为止所尝试的：

在动画的回调函数中设置add / remove类，这种作品看起来很难看，因为它只在动画后设置'X'而且它也不起作用stop()，我需要的。

我最初有两个单独的指令，一个用于处理动画，另一个用于为导航元素设置一些不同的值等。然后我在另一个之后运行了一个指令但是这给了我与当前的，混合的解决方案相同的效果。

这是我目前的尝试：

nav.directive('navSettings', [function() {

  return {
    restrict: 'A',
    link: function($scope, element, attrs) {

      var windowHeight = $(window).height(),
          siteNav = $('#site-nav');

      siteNav.css('height', windowHeight + 'px');

      element.on('click', function() {

        var posLeft = siteNav.position().left,
            navWidth = siteNav.width();

        posLeft === -navWidth ? posLeft = 0 : posLeft = -navWidth;

        if (element.hasClass('x')) {

          element.removeClass('x');
          siteNav.stop().animate({
            left: posLeft
          });
        }
        else {

          element.addClass('x');

          siteNav.stop().animate({
            left: posLeft
          });
        }
      });
    }
  }
}]);

一些HTML与此相符：

<div>
  <div>
    <button id="nav-toggle" data-nav-settings>
      <hr ng-repeat="pin in [1, 2, 3]">
    </button>
  </div>
</div>
<aside id="site-nav">
  <nav class="padding narrow" ng-controller="NavCtrl"></nav>
</aside>

我不知道还有什么可以确保不会发生这种情况。

Answer 1

nav.directive('navSettings', [function() {
    return {
        restrict: 'A',
            link: function($scope, element, attrs) {
                var windowHeight = $(window).height(),
                siteNav = $('#site-nav');
                siteNav.css('height', windowHeight + 'px');
                element.on('click', function() {
                    var posLeft, navWidth = siteNav.width();
                    if (element.hasClass('x')) {
                        element.removeClass('x');
                        posLeft = -navWidth;
                    }else{
                        element.addClass('x');
                        posLeft = 0;
                    }
                    siteNav.stop().animate({
                        left: posLeft
                    });
                });
            }
        }
    }
]);

删除了对左侧位置的额外检查，并将动画移到了if之外。现在检查垃圾邮件过滤器是否有效：）

如何在stop（）取消动画时阻止类保持活动状态？

1 个答案: