How to animate background change effect on button click in angular

Question

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.

jcz · Accepted Answer · 2015-04-16 17:57:40Z

1

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.

answered Apr 16, 2015 at 17:57

jcz

9032 gold badges9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jcubic Over a year ago

this look like kludge to me: while(i < 2000000000) { i++; }, anyway I decide to use jQuery animation instead

jcz Over a year ago

@jcubic I think I wasn't clear enough on this in the comments. This part is only to imitate the calculations. It's absolutely not needed. I added it because I thought it would better show how all this implementation is working but from what I can see it's only confusing. I removed it.

Collectives™ on Stack Overflow

How to animate background change effect on button click in angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related