ngAnimateSwap - ブール式を使用すると期待どおりにアニメートされません。

Question

元のngAnimateSwapの例を修正しました。これはドキュメントenter link description hereにあり、整数の代わりにブール式を使用してスライドアニメーションをトリガーします。

代わりに、 'true'と 'false'の間でバナーを回転させると、 'true'だけが表示されますが、 'false'は表示されません。角度のドキュメントから：「ngAnimateSwapは関連付けられた式が変更されるたびにコンテナを削除して入力できるアニメーション指向のディレクティブです」trueとfalseの間で変更するとコンテナがアニメーション化されることが予想されます。あなたは私のplunkrに更新した場合、別の試験として http://plnkr.co/edit/iKE5BekgpxOqX1YE952Z?p=preview

：コントローラで

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

：HTMLで

ここ

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

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

はplunkrは一例を示していますaboolを1と-1の間で切り替えるには、アニメーションが期待どおりに見える - 1と-1の間でスライドする。

Answer 1

ブール値falseにaboolを設定すると、{{abool}}を補間したくないと考えられます。

あなたが達成しようとしていることは、ブール値の文字列値が必要です。

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

また、ng-classを使用する必要はありません。単純な補間はうまくいくでしょう：

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

作業plunker。