CODEWITHSUNDEEP
javascriptangularjsng-animate
jcubic
jcubic

Reputation: 66590

How to animate background change effect on button click in angular

I have code like this:

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>

How can I create color background change animation when I click the button. I need visual indication that something get calculated.

Upvotes: 1

Views: 747

Answers (1)

jcz
jcz

Reputation: 903

The idea is to add a class which will trigger the CSS transition, just before the calculation starts, then calling the calculations asynchronously, so the transition can take place, then finishing with removing the class so the background goes back to the initial state.

I've used the $animate service because its methods return $promises allowing you to do the job only after the animation is complete.

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

Here's a plunker with the whole implementation.

Sidenote: I would not do such a job in a controller, I would refactor this into a service and made the animations with a directive.

Upvotes: 1

Related Questions