Как сохранить состояние анимации CSS3 после ng-animate?

Question

Я пытаюсь изменить состояние div, используя переходы ng-animate + CSS3.

Мои анимации прекрасно работают с этим CSS, за исключением того факта, что div не сохраняет свой размер + цвет после анимации.

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

Я уже пробовал использовать animation-fill-mode:forwards;, но его состояние по-прежнему не сохраняется.

jsFiddle

Answer 1

, чтобы сохранить свойства после воздействия объекта HTML нужен отдельный класс, так как fade-show и fade-show-active классы будут удалены, когда заканчивается эффект.

Новая скрипка: http://jsfiddle.net/WufYs/1/

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

Вы можете найти больше примеров на nganimate.org сайте