javascript - AngularJS 等待超时功能完成后再继续

Question

我正在使用 AngularJS 构建一个 Web 应用程序，并尝试创建一个过渡动画。当按下按钮时，内容将淡出超过 200 毫秒，更改为新内容，然后再次淡入超过 200 毫秒。下面是 ng-click 按钮调用的函数。

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

但是，当调用该函数时，内容立即发生变化，然后淡出。再次单击该按钮可在淡入和淡出动画之间来回切换。 fadeIn() 和 fadeOut() 如下所示。

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

如有任何帮助，我们将不胜感激!

Answer 1

您没有在代码中使用 promise ，这些 promise 默认由 $timeout 函数给出。 因此，您的代码仅使用 2ms 的间隔，而不是 200ms。

尝试像这样更改您的代码:

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

以及您的 fadeIn() 和 fadeOut 函数..

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-animate 在 angularjs 上执行动画。 请参阅docs有关更多信息，我真的建议您走这条路。