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);
}
任何幫助,將不勝感激!
非常感謝你,這工作幾乎完美!我在寫作時遇到了一些問題。我最終從countUp()和countDown()的初始調用中除去了timeOut,並在這些函數中添加了返回值$ timeout,並解決了這個問題。我一定會看看ng-animate文檔,謝謝。 – RyanM