Анимация, показывающая/скрывающая предупреждение Ui Bootstrap в модальном окне AngularJS

Question

Я пытаюсь анимировать ng-hide, который я использую на кнопке оповещения об установке 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-прятки добавить и .ng-прятки удалять классы, просто указать переход в .alert и изменить свойство в .alert.ng скрытия:

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