I adapted the original ngAnimateSwap demonstration from the AngularJS documentation to utilize a boolean expression for triggering the slide animation.
Initially, I anticipated the banner to switch back and forth between 'true' and 'false'. However, only the 'true' state is displayed while 'false' does not appear. According to the Angular docs, "ngAnimateSwap is an animation-oriented directive that allows the container to be removed and entered whenever the associated expression changes." Therefore, I assumed switching between true and false would animate the container.
The HTML code snippet looks like:
<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';
};
To view the example in action, check out this Plunker: http://plnkr.co/edit/iKE5BekgpxOqX1YE952Z?p=preview
For further experimentation, updating the Plunker to toggle between 1 and -1 instead of true and false results in the expected animation - sliding between 1 and -1.