angularjs - AngularJS ng-show animate不添加动画类

使用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才能添加必要的动画类。我补充说那是什么问题？ (以上css仅在显示框时动画)

最佳答案

Plunker

我个人不喜欢在使用.animate时使用默认的ng-animate类。我建议您在.animate-show元素上扔一个.box-show类，并根据您的风格进行调整。参见柱塞。

我相信发生的事情是在元素上没有动画类或属性，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>

关于angularjs - AngularJS ng-show animate不添加动画类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24024712/