在Modal窗口中顯示/隱藏Ui Bootstrap警報的動畫顯示AngularJS

Question

我試圖在UI Bootstrap模式窗口中使用Ui Bootstrap警報按鈕時使用隱藏。我希望動畫可以將警報滑入和滑出，並同時淡入淡出。

警報正在顯示和隱藏，但隱藏/顯示動畫完全不起作用，而且完全讓我困惑。

展示隱藏代碼：

<alert type="danger" close="hideAlert = true" 
    ng-hide="hideAlert" class="ng-hide">ERROR!</alert> 

動畫的CSS（這可能是完全不正確的......）是：

.alert.ng-hide-add, 
.alert.ng-hide-remove { 

    -moz-transition: 0.5s linear all; 
    -o-transition: 0.5s linear all; 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 

    display: block !important; 
    opacity: 1; 
    max-height:50px; 
} 


.alert.ng-hide { 
    opacity: 0; 
    max-height:0px; 
} 

我已經包括這裏PLNKR到顯示它在它所有的罵名：http://plnkr.co/edit/rQ27FDLHapOTadPJuz6z

請幫助....

Answer 1

無需使用.ng-hide-add和.ng-hide-remove類，只需指定.alert中的轉換並更改.alert.ng-hide中的屬性：

.alert { 
    -moz-transition: 0.5s linear all; 
    -o-transition: 0.5s linear all; 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 

    display: block !important; 
    opacity: 1; 
    max-height:50px; 
} 


.alert.ng-hide { 
    opacity: 0; 
    max-height:0px; 
}