Attempting to alter the state of a div using ng-animate along with CSS3 transitions.
The animations are functioning well with this particular CSS, except for the issue where the div loses its size and color once the animation is completed.
.fade-hide, .fade-show {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.fade-hide {
opacity:1;
}
.fade-hide.fade-hide-active {
opacity:0;
}
.fade-show {
opacity:0;
}
.fade-show.fade-show-active {
opacity:1;
background-color: red;
height: 200px;
}
Have tried implementing animation-fill-mode:forwards; without success in preserving its state.