动画显示/隐藏模态窗口AngularJS中的Ui Bootstrap警报

Question

我试图在Ui Bootstrap模式窗口中的Ui Bootstrap警报按钮上设置我使用的ng-hide动画。我希望动画能够将警报滑入和滑出，并同时淡入淡出。

警报正在显示并正确隐藏，但隐藏/显示动画根本无法正常工作，完全令我困惑。

隐藏代码是：

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