ng-show 不能与 ng-animate 一起正常工作

Question

加载动画模块后，ng-show 不起作用。 ng-show 表达式的默认值为 false，但元素仍然显示并且缺少 class ng-hide。如果我卸载动画模块，那么它工作正常。

<script>
var app=angular.module('app', ['ngRoute','ngCookies','infinite-scroll','ui.mask','ngAnimate']);
</script>

Answer 1

看看animate.css。它适用于 Angular，您可以通过 class='ng-show'.

触发它

像这样：

<div class="animated fadeInRight" data-ng-class="loginShow">

如果您在控制器中将 $scope.loginShow 设置为 'ng-show'，它将自动触发动画效果。

如果你想在 'ng-hide' 上触发动画效果，你必须像这样在你的控制器中编写它：

$scope.loginShow = 'ng-hide-add animated fadeOutRight';

希望对您有所帮助！

Answer 2

我遇到了同样的问题，可能是时间问题，但有解决方法。简而言之，在 "class" 属性中定义的带有插值的 class 与同一元素上试图添加另一个 class 的其他指令之间存在一些冲突。删除 class="{{::item.customClass}}" 得到 ng-class 和 ng-show 指令可以正常工作。

我无法在 plunker 上重现它，可能是因为涉及到大量组件。我们使用 $templateCache 服务、ngAnimate 模块和一个使用 ng-repeat 和动态 class 和 ng-show 的指令（以及更多，这似乎没有影响问题）。删除任何提到的问题都解决了这个问题。有一件事我没有尝试过，那就是试图从 ui-view 层次结构中分离代码，也许 ui-router 是问题的一部分。

调试显示 ng-class/ng-show 的 watch 执行后，添加了正确的 class，看起来像这样：class="{{::item.customClass}} ng-hide"，但在摘要循环结束时它看起来像这样：class="myCustomClass"。我想这也是您的代码中发生的情况。

我处理这种情况的方法是将 item.customClass 移动到 ng-class，如下所示：ng-class=[{ ... other classes}, item.customClass]

这是一种变通方法，而不是真正的解决方案，因为：

这可能是 Angular 代码中的一个真正问题。
这里不知道bind once怎么用，当然重要

ng-show 不能与 ng-animate 一起正常工作

ng-show does not work correctly with ng-animate

javascript

angularjs

ng-animate

ng-show