一部の要素でnganimateを無効にする

私はngAnimateモジュールを使用していますが、すべて私のng-if、ng-showなどは、私はいくつかの選択された要素のためngAnimateを活用したい、それに影響されます。非常に高速に表示および非表示になる要素のパフォーマンスといくつかのバグ。

ありがとう。

これをCSSに追加するだけです。それが最後のルールである場合が最善です：

.no-animate {
   -webkit-transition: none !important;
   transition: none !important;
}

次に、no-animate無効にする要素のクラスに追加します。例：

<div class="no-animate"></div>

特定の要素のアニメーションを有効にする場合（特定の要素のアニメーションを無効にするのではなく）、$ animateProviderを使用して、アニメーション化する特定のクラス名（または正規表現）を持つ要素を構成できます。

以下のコードは、angular-animateクラスを持つ要素のアニメーションを有効にします。

var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
  $animateProvider.classNameFilter(/angular-animate/);
})

以下はangular-animate、アニメーションを有効にするクラスを含むマークアップの例です。

<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
  <input placeholder="Filter with animations." ng-model="f" /> 
  <div class="my-repeat-animation angular-animate" ng-repeat="item in items | filter:f track by item" >
    {{item}}
  </div>
</div>

このブログから借りて変更したPlunkerの例では、最初のフィルターのみにアニメーションがあります（angular-animateクラスがあるため）。

私はangular-animate例として使用しており、.classNameFilter関数を使用して完全に構成可能であることに注意してください。

モジュールの依存関係としてモジュールngAnimateがある場合、AngularJSでアニメーションを無効にする方法は2つあります。

1. $ animateサービスでグローバルにアニメーションを無効または有効にします。

   $animate.enabled(false);

2. 特定の要素のアニメーションを無効にします-これは、angularがanimationstate cssクラス（ng-enterなど）を追加するための要素でなければなりません！

   $animate.enabled(false, theElement);

Angular 1.4バージョン以降、引数を逆にする必要があります：

$animate.enabled(theElement, false);

のドキュメント$animate。

Angular animateパラダイムに従うCSSクラスを使用して、特定の要素のng-animateを無効にするには、正規表現を使用してクラスをテストするようにng-animateを設定できます。

構成

    var myApp = angular.module("MyApp", ["ngAnimate"]);
    myApp.config(function($animateProvider) {
        $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
    })

使用法

ng-animate-disabledng-animateで無視したい要素にクラスを追加するだけです。

クレジット http://davidchin.me/blog/disable-nganimate-for-selected-elements/

おかげで、要素に配置できるディレクティブを作成しました

CoffeeScript：

myApp.directive "disableAnimate", ($animate) ->
  (scope, element) ->
    $animate.enabled(false, element)

JavaScript：

myApp.directive("disableAnimate", function ($animate) {
    return function (scope, element) {
        $animate.enabled(false, element);
    };
});

を$animate.enabled(false, $element);使用する要素では機能するng-showかng-hide、何らかの理由で使用する要素では機能しないことがわかりましたng-if！最終的に使用した解決策は、CSSですべてを実行することでした。これは、GitHubのこのスレッドから学んだものです。

CSS

/* Use this for transitions */
.disable-animations.ng-enter,
.disable-animations.ng-leave,
.disable-animations.ng-animate {
  -webkit-transition: none !important;
  transition: none !important;
}

/* Use this for keyframe animations */
.disable-animations.ng-animate {
  -webkit-animation: none 0s;
  animation: none 0s;
}

SCSS

.disable-animations {
  // Use this for transitions
  &.ng-enter,
  &.ng-leave,
  &.ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
  // Use this for keyframe animations
  &.ng-animate {
    -webkit-animation: none 0s;
    animation: none 0s;
  }
}

私はngAnimateをで使用したくないng-ifので、これが私の解決策になります：

[ng-if] {
  .ng-enter, .ng-leave, .ng-animate {
    -webkit-transition: none !important;
    transition: none !important;
  }
}

これを別の提案として投稿してください！

最初にliを使用して非表示にするリストがありng-hide="$first"ます。ng-enter結果がli消える前に0.5秒間表示される結果を使用します。

Chris Barrのソリューションに基づくと、私のコードは次のようになります。

HTML

<ol>
    <li ng-repeat="item in items"
        ng-hide="$first"
        ng-class="{'no-animate' : $first}">
    </li>
</ol>

CSS

.no-animate.ng-enter,
.no-animate.ng-leave,
.no-animate.ng-animate {
        transition: none !important; /* disable transitions */
        animation: none 0s !important; /* disable keyframe animations */
}

li.ng-enter {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
li.ng-enter-active {
    opacity: 1;
}

/* I use Autoprefixer. If you don't, please include vendor prefixes. */

遅延応答であることはわかっていますが、ここではMainControllerで使用しています。

// disable all animations
$animate.enabled(false);

しかし問題は、すべてのアニメーションを無効にすると、ui-selectがに設定されることopacity: 0です。

したがって、CSSを使用して不透明度を1に設定する必要があります。

.ui-select-choices {
    opacity: 1 !important;
}

これにより、不透明度が適切に設定され、UI選択が機能します。