Trying to create a dynamic animation for an ng-hide feature used on a Ui Bootstrap alert button within a Ui Bootstrap Modal is proving to be quite challenging. The goal is to have the alert slide in and out while simultaneously fading in and out.
Although the alert is properly displaying and hiding, the animation for these actions isn't functioning as expected, leaving me puzzled.
The code for show/hide functionality is as follows:
<alert type="danger" close="hideAlert = true"
ng-hide="hideAlert" class="ng-hide">ERROR!</alert>
The accompanying CSS for the animation (which may not be correct) appears below:
.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;
}
A PLNKR example showcasing this issue can be viewed here: http://plnkr.co/edit/rQ27FDLHapOTadPJuz6z
Your assistance with resolving this matter would be greatly appreciated.