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

自从AngularJS 1.2开始，ng-animate指令被弃用。

相反，您依赖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; 
}