angularjs 阻止角色動畫在ng-show/ng-hide上發生




ng-if ng-show (4)

在我的AngularJS應用程序中,我使用fontawesome作為我的加載微調器:

<i class="fa fa-spin fa-spinner" ng-show="loading"></i>

我也使用AngularToaster來獲取依賴於ngAnimate的通知消息。 當我在我的AngularJS應用程序中包含ngAnimate時,它通過以奇怪的方式設置動畫來擾亂我的加載旋轉器。 我想阻止這種情況發生,但無法找到一種方法來禁用這些加載器上的動畫(它也很臭,必須更新我的應用程序中的每個加載器)。

下面是一個傻瓜,顯示我的確切問題。

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a


Answer #1

我有一個類似的問題,即使在關閉$ scope變量之後,我的圖標將一直旋轉直到動畫結束。 對我有用的是將<i> fa-icon元素包裹在一個範圍內。

<span ng-if="loading"><i class="fa fa-refresh fa-spin"></i></span>

嘗試一下!


Answer #2

我找到了一種更簡單的方法。

<i class="fa fa-spinner" ng-show="loading" ng-class="{'fa-spin' : loading}"></i>

叉式挖掘機: http://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF ://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF

我做了另一個小問題,因為如果它旋轉超過2秒,圖標就會顯得不合適,但這是由'ng-hide-add-active'類引起的,所以我只是在我的CSS中添加:

.fa-spinner.ng-hide-add-active {
    display: none !important;
}

並且照顧它。

編輯:尼科的解決方案是一個稍微清潔的版本,所以我考慮使用他的。


Answer #3
angular.module('myCoolAppThatIsAwesomeAndGreat')
  .config(function($animateProvider) {

    // ignore animations for any element with class `ng-animate-disabled`
    $animateProvider.classNameFilter(/^((?!(ng-animate-disabled)).)*$/);

  });

然後,您可以將類ng-animate-disabled到您想要的任何元素。

<button><i class="fa fa-spinner ng-animate-disabled" ng-show="somethingTrue"></i></button>


Answer #4

更新James Fiala答案 。

<i class="fa fa-spinner fa-spin" ng-show="loading"></i>

你不需要 Answer中提到的ng-class 。 但你應該把fa-spin作為一個類。

添加風格

.fa-spinner.ng-hide-add-active {
   display: none !important;
}




angularjs-animation