ngAnimate在版本1.3.10不起作用

Question

我正在使用以下說明：ngAnimate Angularjs 但是，仍然不起作用。我沒有看到任何效果。

這裏我的代碼：

在我有以下腳本包含的頁面（均是1.3.10版本angularjs的）：

<script type="text/javascript" src="/Scripts/angular.min.js"></script> 
<script type="text/javascript" src="/Scripts/angular-animate.min.js"></script> 
<script type="text/javascript" src="/Scripts/Angular/app.js"></script> 

我app.js如下：

(function (angular) { 
    var public_area = 
     angular.module("public-area", ['ngResource', 'ngAnimate']) 
     ... 

頁I方面的可動畫的代碼是：

<p ng-show="my_condition" class="scale-animation">...</p> 

最後，CSS是

.scale-animation.enter, 
.scale-animation.leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    position:relative; display:block; 
} 

.scale-animation-enter, 
.scale-animation-leave.scale-animation-leave-active { 
    -webkit-transform:scaleY(0); 
    -moz-transform:scaleY(0); 
    -ms-transform:scaleY(0); 
    -o-transform: scaleY(0); 
    transform:scaleY(0); height:0; opacity:0; 
} 

.scale-animation-leave, 
.scale-animation-enter.scale-animation-enter-active { 
    -webkit-transform:scaleY(1); 
    -moz-transform:scaleY(1); 
    -ms-transform:scaleY(1); 
    -o-transform: scaleY(1); 
    transform:scaleY(1); height:30px; opacity:1; 
} 

段落，出現和消失的正確，但沒有動畫顯示... 有什麼奇怪的是，我aspected看到在CSS定義的類DOM（通過Chrome開發者工具）在條件被驗證或沒有被使用時...但是不使用類...

什麼是錯？

遵循一個簡單的PLUNKER：

https://plnkr.co/edit/atK7z5rWzDSEccB2HG0s?p=preview

謝謝

Answer 1

我用錯了CSS類...正確類使用的

/* SCALE */ 
.scale-animation.ng-enter, 
.scale-animation.ng-leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    position:relative; display:block; 
} 

.scale-animation.ng-enter, 
.scale-animation.ng-leave.ng-leave-active { 
    -webkit-transform:scaleY(0); 
    -moz-transform:scaleY(0); 
    -ms-transform:scaleY(0); 
    -o-transform: scaleY(0); 
    transform:scaleY(0); 

    opacity:0; 
} 

.scale-animation.ng-leave, 
.scale-animation.ng-enter.ng-enter-active { 
    -webkit-transform:scaleY(1); 
    -moz-transform:scaleY(1); 
    -ms-transform:scaleY(1); 
    -o-transform: scaleY(1); 
    transform:scaleY(1); 

    opacity:1; 
} 

我更換

ng-show 

與

ng-if 

Answer 2

你需要有transition CSS的原始元素類設置不

這是ngAnimate如何知道如果enter/leave版本它需要在呈現DOM時管理元素動畫。

添加規則

.scale-animation{ 
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
} 

並從轉變：

.scale-animation.enter, 
.scale-animation.leave{ 
    /* remove transition */ 
}