How does one keep CSS3 animation state after ng-animate?

Question

I am trying to change a div' state using ng-animate + CSS3 transitions.

My animations works just fine with this CSS except for the fact that the div doesn't keep its size + color once the animation is done.

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

I have already tried using animation-fill-mode:forwards; but its state is still not preserved.

jsFiddle

Answer 1

to keep the properties after the effects the html object need a separate class, because the fade-show and the fade-show-active classes will be removed when the effect ends.

The new fiddle: http://jsfiddle.net/WufYs/1/

The CSS:

.fade-hide, .fade-show {                                                                                                                                     
    -webkit-transition:all linear 1s;                                                                                                                          
    -moz-transition:all linear 1s;                                                                                                                             
    -o-transition:all linear 1s;                                                                                                                               
    transition:all linear 1s;  
}    
.fade.fade-show.fade-show-active,
.fade.fade-hide {                                                                                                                                                 
    opacity:1;
    height: 200px;
}                                                                                                                                                            
.fade.fade-hide.fade-hide-active,
.fade.fade-show {                                                                                                                                
    opacity:0;    
    height: 0px;
}                                                                                                                      
.fade{
    background-color: red;
    height: 200px;
}

You can find more examples at nganimate.org website