Как анимировать изменения эффекта фона на кнопку мыши в угловых

Question

У меня есть код, как это:

var app = angular.module('app', []); 
 
app.controller('mainController', ['$scope', function($scope) { 
 
    $scope.solve = function() { 
 
     if (!$scope.a) { 
 
      $scope.a = 0; 
 
     } else { 
 
      $scope.a = $scope.a.replace(/[^0-9\-]/g, ''); 
 
      if ($scope.a === '') { 
 
       $scope.a = 0; 
 
      } 
 
     } 
 
     if (!$scope.b) { 
 
      $scope.b = 0; 
 
     } else { 
 
      $scope.b = $scope.b.replace(/[^0-9\-]/g, ''); 
 
      if ($scope.b === '') { 
 
       $scope.b = 0; 
 
      } 
 
     } 
 
     if ($scope.a === 0 && $scope.b === 0) { 
 
      $scope.output = "infinite number of results"; 
 
     } else if ($scope.a === 0) { 
 
      $scope.output = "no results"; 
 
     } else if ($scope.b === 0) { 
 
      $scope.output = "0"; 
 
     } else { 
 
      $scope.output = -$scope.b/$scope.a; 
 
     } 
 
    }; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
 
<div ng-app="app" ng-controller="mainController"> 
 
    <span>f(x) = </span> 
 
    <input type="text" ng-model="a" placeholder="a"/> 
 
    <span>*x +</span> 
 
    <input type="text" ng-model="b" placeholder="b"/> 
 
    <button ng-click="solve()">Solve</button> 
 
    <div id="output">x={{output}}</div> 
 
</div>

Как я могу создать изменение цвета фона анимацию при нажатии кнопки. Мне нужно визуальное указание, что что-то рассчитывается.

Answer 1

Идея состоит в том, чтобы добавить класс, который инициирует переход CSS, непосредственно перед началом вычисления, а затем вызывать вычисления асинхронно, поэтому переход может происходить, а затем заканчивается удалением класса, чтобы фон возвращался к начальное состояние.

Я использовал услугу $animate, потому что ее методы возвращают $promise, что позволяет выполнять эту работу только после завершения анимации.

$scope.solve = function() { 
    $animate.addClass($element, 'start')   
     .then(calculations) //this is where the calculations take place 
          //wrapped like this for clarity 
     .then(function() { 
      $animate.removeClass($element, 'start'); 
      $scope.$digest(); 
     }); 
}; 

Вот plunker со всей реализацией.

Sidenote: Я бы не занимался такой работой в контроллере, я бы реорганизовал это в службу и сделал анимацию директивой.