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; 
}