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