Angularjs ng-show animate 不添加动画类答案

【问题标题】：Angularjs ng-show animate not adds animation classesAngularjs ng-show animate 不添加动画类
【发布时间】：2014-07-24 08:27:19
【问题描述】：

使用 1.3 beta 版本，我包含 angular-animate.js 并将 ngAnimate 添加到我的模块中。

我有一个 html div 元素如下：

<div class='box-show' ng-show='isHidden'>test</div>

在我的 CSS 中：

.box-show {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
  opacity:1;
}

.box-show.ng-hide {
  opacity:0;
}

.box-show.ng-hide-add, .box-show.ng-hide-remove {
  display:block!important;
}

我正在检查 chrome 检查器，但看不到正在添加的 .ng-hide-add 或 .ng-hide-remove 类。仅添加或删除 .ng-hide。该文档说我们需要将 webkit-transition 添加到我们想要为 Angular 设置动画的元素中添加必要的动画类。我已经补充了，那可能是什么问题？（上面的 css 仅在框显示时才动画）

【问题讨论】：

你是怎么解决的？我有同样的问题，不知道发生了什么
如果你想让它与 css 一起工作，请使用 ng 类。尽量不要触碰内置指令。

标签： angularjs animation

【解决方案1】：

Plunker

在玩ng-animate 时，我个人不喜欢使用默认的.animate 类。我建议在您的 .box-show 元素上添加一个 .animate-show 类，然后围绕它使用您的风格。见 Plunker。

我相信正在发生的事情是元素上没有动画类或属性，ng-animate 不知道该怎么做。

示例 CSS：

  .box-show {
    -webkit-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity:0;
  }

  .box-show.animate-show {
    opacity:1;
  }

  .box-show.animate-show.ng-hide-add,
  .box-show.animate-show.ng-hide-remove {
    display:block!important;
  }

  .box-show.animate-show.ng-hide {
    opacity:0;
  }

示例 HTML：

  <div class='box-show animate-show' ng-show='isHidden'>test</div>

【讨论】：

不，它不会改变任何东西......我认为我的代码中还有另一个问题......我正在通过链接调用的指令更改 isHidden。但我不认为问题在于......我在另一个元素上有一个自定义 js 动画。会是这个原因吗？
另一个元素上的自定义 JS 动画通常不会干扰。你是从自定义绑定中调用 isHidden 吗？例如，angular.element( window ).bind( 'scroll', function() { scope.isHidden = true; }); 不会被 Angular 捕获，直到您按照指令的范围更新运行 if ( !$scope.$$phase ) $scope.$apply()。

【解决方案2】：

我遇到了同样的问题，我为ng-animate添加了一个css样式解决了它

.box-show.ng-animate {
  opacity:0;
}

我不知道为什么，但它有效。在我的css中包含ng-animate后，Angular开始为元素分配相应的类（ng-hide-add，ng-hide-remove ...）。

【讨论】：

【解决方案3】：

当这发生在我身上时，是因为我没有将 ngAnimate 注入到控制器中。我花了一段时间才弄清楚这个非常基本的疏忽。希望这对其他人有帮助！

【讨论】：