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

【问题标题】：How does one keep CSS3 animation state after ng-animate?ng-animate 之后如何保持 CSS3 动画状态？
【发布时间】：2013-06-22 21:58:34
【问题描述】：

我正在尝试使用 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

【问题讨论】：

在 .jsfiddle 中，.fade-show 和 .fade-show-active 类在动画结束时被 javascript 从父 div 中删除。由于样式和可见性与这些类相关联，因此一旦动画完成并将它们删除，html 就会删除颜色和高度属性。这不是一个真正的答案 - 我不熟悉 ng-animate，但也许它可以为您指明正确的方向。

标签： css angularjs ng-animate

【解决方案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 网站上找到更多示例

【讨论】：

知道如何在 Firefox 中使用它吗？从 display:none 转到另一个值时，它似乎在显示期间失败了。