ngAnimateSwap-使用布尔表达式不会按预期设置动画

ngAnimateSwap - using boolean expression does not animate as expected

本文关键字：设置 动画 布尔表达式 ngAnimateSwap-      更新时间：2023-09-26

我修改了原始的ngAnimateSwap示例，该示例位于此处的文档输入链接描述中，使用布尔表达式而不是整数来触发幻灯片动画。

我希望横幅在"true"answers"false"之间旋转，但是，只有"true"出现，而"false"没有。从角度文档来看："ngAnimateSwap是一个面向动画的指令，它允许在关联表达式发生变化时移除容器并将其输入。"所以我本以为在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';
};

下面是显示示例的plunkr：http://plnkr.co/edit/iKE5BekgpxOqX1YE952Z?p=preview

作为另一个测试，如果您更新到我的plunkr，将abool更改为在1和-1之间切换，那么动画看起来就像预期的那样——在1和+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。

相关文章：