動畫結束事件Zurb基金會的應用程序

我有一個向上滾動事件和一個向下滾動事件。我正在嘗試使用FoundationAPI.animate來向上滾動一個div，然後向下滾動slideOutBottom。 div的原始狀態有一類隱藏，因爲沒有滾動 - 它離開頁面的底部。我有這個工作，除了一個問題。 slideOutBottom動畫完成後，hide類不再位於div中，因此它在slideOutBottom完成後顯示。我希望它留隱患就像是在狀態0動畫結束事件Zurb基金會的應用程序

代碼：

$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上的文檔現在缺乏...

來源

2015-01-07 bneigher

呀Apps文檔是需要緊急的愛。有點令人失望。應用顯然比網站基金會更復雜，但沒有相應的文檔。 Comon Zurb！ – willdanceforfun

不是一個答案，而是一個解決方案。這是一個更自然的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>

所以我與特定視圖容器上的指令結合的滾動事件;這決定了我們檢測向上/向下滾動事件的邏輯。根據指令，我將這些函數定義爲範圍控制器（上圖）。這些被綁定在這個範圍內的「lock」變量的2種方式中。

請注意，動畫觸發的方式是錨中的類。我認爲有定義輸入動畫和定義出口動畫，這是都出現在課堂上。因此，根據我的控制器中的$ scope.lock變量的布爾值，ng-hide將會啓動。

完全不明確的 - 我想會更清楚的角度專家

來源

2015-03-20 02:45:05 bneigher

動畫結束事件Zurb基金會的應用程序

回答

相關問題