ng-Animate不會刪除添加類角1.2.x

Question

我想在加載完成後加載並停止動畫時嘗試創建圖標。我試圖通過激活一個基於刷新屬性的類。這在AngularJS 1.2.0-rc.3中有效，但現在（試過1.2.3和1.2.4）動畫從不停止，我相信原因是添加的add類在綁定變量更改爲false。

這裏是蹲在演示。

http://plnkr.co/edit/fbcCPxwZtcIoS0ZqrHhf?p=preview

有趣的是，可變更爲切換最終做停止動畫。我試圖做的是有效的，我想我總是可以隱藏一個加載GIF，但我喜歡動畫現有圖像的想法

謝謝！ Curt

Answer 1

問題出在你的CSS。

你不需要'.icon-refresh-animate-add'。

使用該CSS類：

.icon-refresh-animate { 
    animation-name: rotateThis; 
    animation-duration: .5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
    -webkit-animation-name: rotateThis; 
    -moz-animation-name: rotateThis; 
    -webkit-animation-duration: .5s; 
    -moz-animation-duration: .5s; 
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-timing-function: linear; 
} 

這是你生命的相加的翻版。

說明： ngClass打開和關閉.icon-refresh-animate類。所以當狀態爲真時，類將被應用並且動畫會永久循環。當狀態爲false時，CSS類將被刪除，所以根本不會有動畫。所以這段代碼爲您完成所有

ng-class="{'icon-refresh-animate':refreshing}" 

的工作，下面是完整的CSS：

@keyframes rotateThis { 
    from { 
    transform: scale(1) rotate(0deg); 
    } 
    to { 
    transform: scale(1) rotate(360deg); 
    } 
} 
@-webkit-keyframes rotateThis { 
    from { 
    -webkit-transform: scale(1) rotate(0deg); 
    } 
    to { 
    -webkit-transform: scale(1) rotate(360deg); 
    } 
} 

.icon-refresh-animate { 
    animation-name: rotateThis; 
    animation-duration: .5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
    -webkit-animation-name: rotateThis; 
    -moz-animation-name: rotateThis; 
    -webkit-animation-duration: .5s; 
    -moz-animation-duration: .5s; 
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-timing-function: linear; 
}