2016-08-20 149 views
0

我正在使用AngularJS構建一個webapp,並試圖創建一個過渡動畫。按下按鈕時,內容將淡出超過200毫秒,更改爲新內容,然後再次在200毫秒內淡入。下面是通過在按鈕上單擊調用的函數。AngularJS用超時等待函數在繼續之前完成

$scope.homeButton = function(){ 
 
\t fadeOut(); 
 
\t $scope.content="dolor sit amet"; 
 
\t fadeIn(); 
 
\t resetButtons(); 
 
\t $scope.homeButtonSrc = "res/homebuttonselected.png"; 
 
};

然而,當函數被調用時,內容立即更改,然後淡出。再次單擊按鈕可在淡入和淡出動畫之間來回切換。下面顯示了fadeIn()和fadeOut()。

var fadeOut = function fadeOut(){ 
 
\t var countDown = function(){ 
 
\t \t $scope.contentOpacity -= .01; 
 
\t \t if($scope.contentOpacity > 0){ 
 
\t \t \t $timeout(countDown, 2); 
 
\t \t } 
 
\t } 
 
\t $timeout(countDown, 2); 
 
} 
 
var fadeIn = function fadeIn(){ 
 
\t var countUp = function(){ 
 
\t \t $scope.contentOpacity += .01; 
 
\t \t if($scope.contentOpacity < 1){ 
 
\t \t \t $timeout(countUp, 2); 
 
\t \t } 
 
\t } 
 
\t $timeout(countUp, 2); 
 
}

任何幫助,將不勝感激!

回答

1

您的代碼中沒有使用承諾,這是由$ timeout函數默認給出的。 因此,您的代碼使用的時間間隔僅爲2ms,而不是200ms。

試圖改變你的代碼是這樣的:

$scope.homeButton = function(){ 
    fadeOut().then(function(){ 
     $scope.content="dolor sit amet"; 
     fadeIn().then(function(){ 
     resetButtons(); 
     $scope.homeButtonSrc = "res/homebuttonselected.png"; 
     }); 
    }); 
}; 

和你的淡入()和淡出功能..

var fadeIn = function fadeIn(){ 
    var countUp = function(){ 
     $scope.contentOpacity += .01; 
     if($scope.contentOpacity < 1){ 
      $timeout(countUp, 2); 
     } 
    } 
    return $timeout(countUp, 200); //return here it's important 
} 
//same for fadeOut... 

但真正的答案是使用NG-動畫來執行你的angularjs上的動畫。 有關更多信息,請參閱docs,我真的建議你這樣做。

+0

非常感謝你,這工作幾乎完美!我在寫作時遇到了一些問題。我最終從countUp()和countDown()的初始調用中除去了timeOut,並在這些函數中添加了返回值$ timeout,並解決了這個問題。我一定會看看ng-animate文檔,謝謝。 – RyanM

相關問題