在ng-animate之後如何保持CSS3動畫狀態？

我正在嘗試使用ng-animate + CSS3轉換來更改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

來源

2013-06-25 rxdazn

在.jsfiddle，.fade秀找到更多的例子和.fade - 展示 - 當動畫結束時，活動類將被父div中的javascript刪除。由於樣式和可視性與這些類相關聯，一旦動畫完成並將其移除，html將刪除顏色和高度屬性。這不是一個真正的答案 - 我不熟悉ng-animate，但也許它可以指出你在正確的方向。 – Deborah

保持屬性的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網站

來源

2013-06-26 01:45:42

任何想法如何使這與Firefox的工作？在從'display：none'轉到另一個值時，它在演出期間似乎失敗了。 – sh0ber

在ng-animate之後如何保持CSS3動畫狀態？

回答

相關問題