我对我得到的动画感到困惑,基本上我在导航按钮上设置了一个类,当菜单可见时,它将它从三个引脚变成一个x。
问题是,当您垃圾点击按钮时,尽管菜单不在屏幕上,但 x
类仍可能处于事件状态。这[很可能]是由 stop()
函数引起的,因为它取消了动画。
这是我迄今为止尝试过的:
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
之外。现在检查垃圾邮件过滤器是否有效:)
关于javascript - 当 stop() 取消动画时,如何防止类保持事件状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31392077/