ngAnimateSwap - boolescher Ausdruck wird nicht wie erwartet animiert

Question

Ich habe das ursprüngliche ngAnimateSwap-Beispiel modifiziert, das in der Dokumentation enter link description here gefunden wurde, um einen booleschen Ausdruck anstelle einer Ganzzahl zum Auslösen der Folienanimation zu verwenden.

Ich würde erwarten, dass das Banner zwischen "wahr" und "falsch" rotieren würde, stattdessen erscheint nur das "Wahr", aber das "Falsch" nicht. Aus den eckigen Dokumenten: "ngAnimateSwap ist eine animationsorientierte Direktive, die es ermöglicht, dass der Container entfernt und eingegeben wird, wenn sich der zugehörige Ausdruck ändert." Ich hätte daher erwartet, dass die Änderung zwischen true und false dazu führen würde, dass der Container animiert wird.

Im html:

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

In der Steuerung:

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

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

Hier zeigt die plunkr das Beispiel: http://plnkr.co/edit/iKE5BekgpxOqX1YE952Z?p=preview

Als weiteren Test, wenn Sie meine plunkr aktualisieren Um abool zu ändern, um zwischen 1 und -1 zu wechseln, sieht die Animation wie erwartet aus - gleitet zwischen 1 und -1.

Answer 1

Wenn Sie abool auf den Booleschen Wert gesetzt false Winkel denkt, dass Sie nicht wollen, {{abool}} zu interpolieren.

Für das, was Sie erreichen möchten, benötigen Sie den String-Wert des Boolean.

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

Auch brauchen Sie nicht ng-class zu verwenden. eine einfache Interpolation würde gut tun:

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

plunker Arbeiten.