角動畫不起作用

我試圖在一個div上使用動畫顯示，角動畫不起作用

<div class="animate-show title span3" ng-show="status.processing" ng-bind="status.message" > 

     </div>

和CSS有

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

.animate-show.ng-hide { 
line-height:0; 
opacity:0; 
padding:0 10px; 
} 

.animate-show { 
line-height:20px; 
opacity:1; 
padding:10px; 
    }

任何建議，爲什麼這是不行的？我看到我的div顯示和隱藏，但沒有運行動畫。

來源

2014-10-03 Chen Kinnrot

轉換必須位於根元素上。 – 2014-10-03 12:32:03

爲什麼不使用ngClass然後將動畫綁定到該類？ https://docs.angularjs.org/api/ng/directive/ngClass – peinearydevelopment 2014-10-03 13:58:19

我想你不能使用轉換將'display'說成''''block'。編輯：哎呀，對不起，我的壞，沒有注意到CSS – skip405 2014-10-03 15:21:22

我認爲你需要在你的CSS中添加ng-enter/ng-leave類。此外，發生任何動畫之前定義的動畫放映的過渡狀態，因此刪除喜歡的東西ng-hide-add.ng-hide-add-active

嘗試：

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

.animate-show.ng-hide 
.animate-show.ng-leave { 
    line-height:0; 
    opacity:0; 
    padding:0 10px; 
} 

.animate-show, 
.animage-show.ng-enter, 
.animage-show.ng-move { 
    line-height:20px; 
    opacity:1; 
    padding:10px; 
}

如果你不想使用NG-顯示，這裏有一個例子它使用ng-class：http://plnkr.co/edit/FQDRUkSoellXEFMET33z?p=preview

來源

2014-10-03 15:43:24 SoluableNonagon

嗨，我看到你的例子工作。但由於某種原因不適合我。 – 2014-10-04 22:21:07

我看到，由於某種原因，如果我用ng-hide代替ng顯示，我可以看到div多一點時間，爲什麼？ – 2014-10-04 22:22:47

角動畫不起作用

回答

相關問題