ngAnimateSwap - 使用布尔表达式不会按预期进行动画处理

Question

我修改了在文档 enter link description here 中找到的原始 ngAnimateSwap 示例，以使用布尔表达式而不是整数来触发幻灯片动画。

我希望横幅在 'true' 和 'false' 之间轮换，但是相反，只有 'true' 出现，而 'false' 没有出现。来自 angular 文档："ngAnimateSwap is a animation-oriented directive that allows for the container to be removed and entered in whenever the associated expression changes. " 所以我预计在 true 和 false 之间切换会导致容器动画。

在html中：

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

在控制器中：

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

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

这是显示示例的插件： http://plnkr.co/edit/iKE5BekgpxOqX1YE952Z?p=preview

作为另一个测试，如果您更新到我的 plunkr 以更改 abool 以在 1 和 -1 之间切换，那么动画看起来像预期的那样 - 在 1 和 -1 之间滑动。

Answer 1

当你设置abool为布尔值时false angular认为你不想插值{{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。

ngAnimateSwap - 使用布尔表达式不会按预期进行动画处理

ngAnimateSwap - using boolean expression does not animate as expected

javascript

angularjs

ng-animate

angularjs-1.5