Angularjs ng-show animate 不添加动画类

Question

我使用 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 仅在框显示时才会显示动画)

Answer 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>