Question

我正在使用AngularJS构建一个webapp，并尝试创建一个过渡动画。按下按钮时，内容将在200ms内淡出，更改为新内容，然后在200ms内再次淡入。下面是通过按钮点击按钮调用的函数。

＆＃13;

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

＆＃13;

但是，当调用该函数时，内容会立即更改，然后淡出。再次单击该按钮可在淡入和淡出动画之间来回切换。 fadeIn（）和fadeOut（）如下所示。

＆＃13;

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

＆＃13;

任何帮助将不胜感激！

Answer 1

您没有在代码中使用promises，默认情况下由$ timeout函数提供。因此，您的代码使用的间隔仅为2毫秒，而不是200毫秒。

尝试更改您的代码：

$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，我真的建议您这样做。

AngularJS在继续之前等待超时完成的功能

1 个答案: