ng-show 无法在 ng-animate 中正常工作

ng-show does not work correctly with ng-animate

本文关键字：常工作 工作 ng-animate ng-show      更新时间：2023-09-26

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

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

我有同样的问题，这可能是时间问题，但有一个解决方法。简而言之，在带有插值的"class"属性中定义的类与尝试添加另一个类的同一元素上的其他指令之间存在一些冲突。 删除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类，如下所示：ng-class=[{ ... other classes}, item.customClass]

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

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

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';

希望这有帮助！

相关文章：