javascript - ngAnimate 什么都不做？

Question

我的 HTML 看起来像这样；

  <div class="loadingmsg" ng-show="!isReady()" ng-animate="{show:'animate-show', hide:'animate-hide'}">
    <div class="loadingmsg-txt glyphicon glyphicon-flash">{{msg.loading || 'loading'}}</div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="{{msg.loadingPerc}}" aria-valuemin="0" aria-valuemax="100" style="width: {{msg.loadingPerc}}%;">
      {{msg.loadingPerc}}%
      </div>
    </div>
  </div>

我已经在 CSS 中添加了必要的类；

.animate-show, .animate-hide {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -ms-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
}

.animate-show {
  opacity:0;
}

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

.animate-hide {
  opacity:1;
}

.animate-hide.animate-hide-active {
    opacity:0;
}

这很简单。

但是，每当 !isReady() 返回 true 时，我希望 div 淡出。那不会发生，绝对没有过渡。

我做错了什么？

编辑新的 CSS:

.loadingmsg.ng-hide-add,
.loadingmsg.ng-hide-remove {
    -webkit-transition:all linear 10s;
    -moz-transition:all linear 10s;
    -ms-transition:all linear 10s;
    -o-transition:all linear 10s;
    transition:all linear 10s;
}

.loadingmsg.ng-hide-add {
    opacity: 0;
}

.loadingmsg.ng-hide-remove {
    opacity: 1;
}

和 HTML:

  <div class="loadingmsg" ng-show="!isReady()">
    <div class="loadingmsg-txt glyphicon glyphicon-flash"></div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="{{msg.loadingPerc}}" aria-valuemin="0" aria-valuemax="100" style="width: {{msg.loadingPerc}}%;">
      {{msg.loadingPerc}}%
      </div>
    </div>
  </div>

但这仍然没有任何区别。

Answer 1

ng-animate 指令自 AngularJS 1.2 以来已弃用。

相反，您依赖于在显示或隐藏元素时由 AngularJS 添加的类。

请参阅this关于如何使用 AngularJS 1.2 及更高版本的动画的优秀文章。

您的 HTML 标记保持不变，但稍作修改 - 删除 ng-animate 指令:

<div class="loadingmsg" ng-show="!isReady()">
    <div class="loadingmsg-txt glyphicon glyphicon-flash">
        {{msg.loading || 'loading'}}
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" 
             aria-valuenow="{{msg.loadingPerc}}" aria-valuemin="0" 
             aria-valuemax="100" style="width: {{msg.loadingPerc}}%;">
            {{msg.loadingPerc}}%
        </div>
    </div>
</div>

然后为各个类定义适当的动画(参见引用资料)

.loadingmsg.ng-hide-add,
.loadingmsg.ng-hide-remove {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -ms-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
}

.loadingmsg.ng-hide-add {
    opacity: 0;
}

.loadingmsg.ng-hide-remove {
    opacity: 1;
}