当stop()取消动画时，如何防止类保持活动状态

How to prevent a class from remaining active when stop() cancels the animation?

本文关键字：何防止 活动状态 stop 取消 动画      更新时间：2023-09-26

我被我得到的动画难住了，基本上我在导航按钮上设置了一个类，当菜单可见时，它从三个引脚变成了一个x。

问题是，当你垃圾点击按钮，这是可能的x类是活跃的，尽管菜单出了屏幕。这很可能是由stop()函数引起的，因为它取消了动画。

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

  • 在动画的回调函数中设置添加/删除类，这种类型的工作，但看起来很难看，因为它只设置动画后的'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>

    我不知道还能做些什么来确保这种情况不会发生。

    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之外。现在检查一下垃圾邮件过滤器是否有效:)

    相关文章：