Question

加载animate模块后，ng-show不起作用。 ng-show expression的默认值为false，但仍显示元素且缺少类ng-hide。如果我卸载动画模块，那么它可以正常工作。

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

Answer 1

看看animate.css。它适用于Angular，你可以通过class =＆＃39; ng-show＆＃39;。

来触发它

像这样：

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

如果您将$ scope.loginShow设置为＆＃39; ng-show＆＃39;在你的控制器中它会自动触发动画效果。

如果您想要触发＆＃39; ng-hide＆＃39;你必须在你的控制器中写这样：

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

希望这有帮助！

Answer 2

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

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

调试表明，在ng-class / ng-show的监视执行之后，添加了正确的类，它看起来像这样：class="{{::item.customClass}} ng-hide"，但在摘要周期结束时看起来像这个：class="myCustomClass"。我想这也是你的代码中发生的事情。

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

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

这可能是Angular代码中的一个真正问题。
我不知道如何在这里使用bind，当然这很重要。

使用ng-animate时，ng-show无法正常工作

2 个答案: