ng-classでトランジッションディレイが動作しない

Question

ボタン上にフォントの素晴らしいアイコンがあり、fa-searchとfa-spinnerのアイコンがng-classで切り替わります（ユーザーが対応する入力に何かを入力すると、オートコンプリートが実行され、 AJAXリクエストやスピナーを表示する）：

<button type="submit" class="btn btn-primary"> 
    <i id="metasearch-icon" style="width: 15px;" ng-class="['fa', {'fa-spinner fa-pulse': loadingLocations, 'fa-search': !loadingLocations}]"></i> 
    <span class="hidden-xs-inline">Search</span> 
</button> 

しかし、この実装でそれはあまりにも速く点滅し、私は、少なくとも0.25秒のためにスピナーを表示したいです。したがって、私はtransition-delayを紹介したかったが、それは動作しません：私は間違って何をやっている

#metasearch-icon.fa-spinner-add, 
#metasearch-icon.fa-spinner-remove { 
    transition-delay: 0.25s !important; 
    transition: 1s linear all !important; 
    background: red !important; 
}; 

？

Answer 1

遷移を宣言した後にプロパティtransition-delayを配置します。

#metasearch-icon.fa-spinner-add, 
#metasearch-icon.fa-spinner-remove { 
    transition: 1s linear all !important; 
    transition-delay: 0.25s !important; 
    background: red !important; 
};