web-dev-qa-db-ja.com

Stop Angular ng-show / ng-hideでアニメーションが発生しない

私のAngularJSアプリケーションでは、ロードスピナーにfontawesomeを使用しています：

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

また、ngAnimateに依存する通知メッセージにAngularToasterを使用しています。 AngularJSアプリケーションにngAnimateを含めると、ロードスピナーを奇妙な方法でアニメートして混乱させます。私はこれが起こらないようにしたいのですが、これらのローダーだけでアニメーションを無効にする方法を見つけることができません（アプリにあるすべてのローダーを更新しなければならないのも嫌です）。

私の正確な問題を示すプランカーです。

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a

angularjsanimationfont-awesomeangularjs-animation
45
Chris Lees

$ scope変数がオフになった後でも、アニメーションが終了するまでアイコンが回転し続けるという同様の問題がありました。私のために働いたのは、<i>スパン内のfa-icon要素。

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

それを試してみてください！

38
internet-nico

もっと簡単な方法を見つけました。

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

フォークドプランカー： http://plnkr.co/edit/mCsw5wBL1bsLYB7dCtQF

これを行った結果、アイコンが2秒以上回転すると位置がずれて表示されるという別の小さな問題に遭遇しましたが、それは「ng-hide-add-active」クラスが原因でしたので、私のCSSに追加されました：

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

そしてそれはそれの世話をしました。

編集：ニコのソリューションはこれのわずかにクリーンなバージョンなので、彼の使用を検討したいと思います。

18
James Fiala
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>

3
ilovett

更新中 James Fiala Answer 。

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

@ James Fiala Answerで述べたng-classは必要ありません。ただし、クラスの1つとしてfa-spinが必要です。

スタイルを追加

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