Angular：在不包含模塊的情況下淡入/淡出NgAnimate

Question

我正在Angular中構建一個小型Web應用程序，其中包含一個帶有「保存更改」按鈕的窗體。

我想顯示一個綠色的勾號，表示正確更新數據，並帶有快速淡入/淡出動畫。

我不認爲值得爲該動畫添加一個20-ish的Kb模塊（我不需要爲應用程序的其他部分設置動畫）。

是否有另一種方式來執行一個簡單的動畫，而不包括NgAnimate，這最好是符合「角度的方式」？

Answer 1

是的，有一種方法 - 您可以使用CSS動畫，$timeout和ng-class。這是一個example。

基本上你切換標誌父控制器

ctrl.showCheckmark = function() { 
    ctrl.isShowingCheckmark = true; 

    $timeout(function() { 
     ctrl.isShowingCheckmark = false; 
    }, 2000); 
} 

和觀看對號成分的變化。

當標誌改變您設置的知名度和淡入旗幟：

$ctrl.show = function() { 
    $ctrl.isShowing = true; 

    $timeout(function() { 
     $ctrl.fadeIn = true; 
     $ctrl.fadeOut = false; 
    }); 
}; 

使用$timeout等待以前$digest完成並呈現ng-if="$ctrl.isShowing"。

剩下的就是寫一些CSS動畫，這很容易。