AngularJSタイムアウトの関数が完了するまで待つ

Question

私はAngularJSを使ってWebアプリケーションを構築しており、トランジションアニメーションを作成しようとしています。ボタンを押すと、コンテンツが200ms以上フェードアウトし、新しいコンテンツに変更され、200ms以上再びフェードインします。以下は、ボタンをngクリックして呼び出す関数です。

$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); 
 
}

任意の助けいただければ幸いです！

Answer 1

あなたのコードでは、$ timeout関数によってデフォルトで与えられている約束を使用していません。 したがって、コードでは200msではなく2msの間隔しか使用していません。

は、このようなあなたのコードに変更してください：

$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-アニメーションを使用することですanglejsのアニメーション。 詳細については、docsを参照してください、私は本当にこの方法をお勧めします。