我修改了在文档中找到的原始 ngAnimateSwap 示例 enter link description here使用 bool 表达式而不是整数来触发幻灯片动画。
我希望横幅在“true”和“false”之间轮换,但是相反,只有“true”出现,而“false”没有出现。来自 Angular 文档:“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>
在 Controller 中:
$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
设置为 bool 值 false
时,angular 认为您不想插入 {{abool}}
。
对于您要实现的目标,您需要 bool 值的字符串值。
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 .
关于javascript - ngAnimateSwap - 使用 bool 表达式不会按预期进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36208308/