css - ng-animate 之后如何保持 CSS3 动画状态？

Question

我正在尝试使用ng-animate+ CSS3 转换来更改 div' 状态。

我的动画与这个 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网站上找到更多示例