ngAnimateSwap - using boolean expression does not animate as expected

Question

I modified the original ngAnimateSwap example this is found in the docs enter link description here to use a boolean expression instead of an integer to trigger the slide animation.

I would expect the banner to rotate between 'true' and 'false' however instead, only the 'true' appears, but the 'false' does not. From the angular docs: "ngAnimateSwap is a animation-oriented directive that allows for the container to be removed and entered in whenever the associated expression changes. " so I would have expected changing between true and false would cause the container to animate.

In the html:

  <div class="container" ng-controller="AppCtrl">
    <div ng-animate-swap="abool" class="cell swap-animation" ng-class="colorClass(abool)">
      {{ abool }}
    </div>
  </div>

In the controller:

$scope.abool = false;
$interval(function() {
  $scope.abool = !$scope.abool
}, 1000);

$scope.colorClass = function(abool) {
  return abool ? 'red' : 'blue';
};

Here is the plunkr showing the example: http://plnkr.co/edit/iKE5BekgpxOqX1YE952Z?p=preview

As another test, if you update to my plunkr to change abool to toggle between 1 and -1, then the animation looks as expected - sliding between 1 and -1.

Answer 1

When you set abool to the boolean value false angular thinks you don't want to interpolate {{abool}}.

For what you're trying to achieve, you need the string value of the boolean.

var abool = false;
$interval(function() {
  abool = !abool;
  $scope.abool = abool.toString();
  $scope.colorClass = abool ? 'red' : 'blue';
}, 1000);

Also, you don't need to use ng-class. a simple interpolation would do just fine:

<div ng-animate-swap="abool" class="cell swap-animation {{colorClass}}">
   {{ abool }}
</div>

Working plunker.