Javascript 如何在“角度”中单击按钮时设置背景更改效果的动画

我有这样的代码：

var-app=angular.module（'app'，[]）；
app.controller（'mainController'，['$scope'，函数（$scope）{
$scope.solve=函数（）{
如果（！$scope.a）{
$scope.a=0；
}否则{
$scope.a=$scope.a.replace（/[^0-9\]/g'）；
如果（$scope.a==''）{
$scope.a=0；
}
}
如果（！$scope.b）{
$scope.b=0；
}否则{
$scope.b=$scope.b.replace（/[^0-9\]/g'）；
如果（$scope.b==''）{
$scope.b=0；
}
}
如果（$scope.a==0&&$scope.b==0）{
$scope.output=“无限多个结果”；
}else if（$scope.a==0）{
$scope.output=“无结果”；
}else if（$scope.b==0）{
$scope.output=“0”；
}否则{
$scope.output=-$scope.b/$scope.a；
}
};
}]);

f（x）=
*x+
解决
x={{output}}
我们的想法是在计算开始之前添加一个类，该类将触发CSS转换，然后异步调用计算，这样可以进行转换，然后删除该类，使背景恢复到初始状态

我使用了
$animate
服务，因为它的方法返回
$promise
s，允许您仅在动画完成后才能执行该工作

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

下面是一个关于整个实现的示例

旁注：我不会在控制器中做这样的工作，我会将其重构为一个服务，并使用一个指令制作动画。
对我来说这看起来像一个乱七八糟的东西：
，而（I<2000000000）{I++；}
，无论如何，我决定使用jQuery动画instead@jcubic我想我在评论中对此不够清楚。这部分只是模拟计算。绝对不需要。我添加它是因为我认为它可以更好地显示所有这些实现是如何工作的，但从我所看到的来看，它只是令人困惑。我把它拿走了。