Question

我有一个向上滚动事件和一个向下滚动事件。我试图使用FoundationAPI.animate来向上滚动向上滚动div，然后向下滚动slideOutBottom。 div的原始状态有一类隐藏，因为没有滚动 - 它生活在页面底部。除了一个问题，我有这个工作。完成slideOutBottom动画后，隐藏类不再位于div中，因此它会在slideOutBottom完成后显示。我希望它像0状态一样隐藏。

代码：

$scope.scrollUp = function() {
  if ($scope.lock == false ){ 
    console.log('scrolling up');
    $scope.lock = true;
    FoundationApi.animate($('.footer-bar'), $state, "slideInUp", "hide");
    console.log($state);
  }
};
$scope.scrollDown = function() {
  if ($scope.lock == true){
    console.log('scrolling down');
    $scope.lock = false;
    FoundationApi.animate($('.footer-bar'), !$state, "hide", "slideOutBottom");
    // setTimeout(function() {
    //   $('.footer-bar').addClass('hide');
    // }, 999);
  }  
};

如何访问FoundationAPI.animate（4）函数的回调，以便它在完成时触发？注释掉的超时有效，但在slideOutBottom完成后，会出现页脚栏，然后应用隐藏类。这会导致div快速闪烁。任何人？关于FoundationApi的文档现在还缺乏......

Answer 1

不是答案，而是解决方案。这是一种更自然的AngularJS方法：

控制器：

 function myController($scope, ...) {
    $scope.lock = false;

    $scope.scrollUp = function() {
      if ($scope.lock == false ){ 
          $scope.lock = true;
          $scope.$apply();
       }
    };
    $scope.scrollDown = function() {
      if ($scope.lock == true){
          $scope.lock = false;
          $scope.$apply();
      }
    };
 }

查看：

<a id="footer" class="slideInUp slideOutBottom footer-bar" ng-hide="lock" zf-open="myModal">
    <div>Click Me</div>
</a>

所以滚动事件我与特定视图容器上的指令绑定;这决定了我们检测向上/向下滚动事件的逻辑。从指令我调用这些定义了作用域控制器的函数（上图）。这些绑定的2个方式与此范围内可访问的“锁定”变量。

请注意，触发动画的方式是使用锚中的类。我认为已经定义了输入动画并定义了退出动画，这些动画都存在于课程中。因此，ng-hide取决于我的控制器中$ scope.lock变量的布尔值。

完全不清楚 - 我想Angular专家会更清楚

动画结束活动Zurb Foundation for apps

1 个答案: