动画 showing/hiding Ui Bootstrap 模式中的警报 window AngularJS

Question

我正在尝试为我在 Ui Bootstrap 警报按钮上使用的 ng-hide 制作动画 Ui Bootstrap 模态 window .我希望动画将警报滑入和滑出，并同时淡入和淡出。

警报显示和隐藏正常，但 hiding/showing 动画根本不起作用，这让我很困惑。

显示隐藏代码为：

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