Question

使用1.3测试版我包括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

在使用.animate时，我个人不会使用默认的ng-animate课程。我建议在.animate-show元素上抛出一个.box-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>

Answer 2

我遇到了同样的问题，我解决了为ng-animate

添加css样式的问题

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

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

Answer 3

当我遇到这种情况时，那是因为我没有将ngAnimate注入控制器。我花了一些时间来弄清楚这个非常基本的疏忽。希望这会帮助别人！

Angularjs ng-show animate不会添加动画类

3 个答案: