AngularJS Подождите, пока функция завершится, пока не закончится

Question

Я создаю webapp используя AngularJS и пытаюсь создать анимацию перехода. Когда нажимается кнопка, содержимое должно исчезнуть более чем на 200 мс, перейти на новый контент, а затем снова исчезнуть более чем на 200 мс. Ниже приведена функция, которая называется ng-click на кнопке.

$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. Таким образом, ваш код использует интервал всего 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... 

Но реальный ответ здесь заключается в использовании нг-одушевленные для выполнения вашей анимации на угловых. См. docs для получения дополнительной информации, я действительно предлагаю вам пройти этот путь.