97

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

ありがとう。

4

9 に答える 9

107

特定の要素に対してアニメーションを無効にするのではなく、特定の要素に対してアニメーションを有効にする場合は、$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関数を使用して完全に構成できることに注意してください。

于 2014-07-02T22:31:13.513 に答える
82

モジュールの依存関係としてモジュール 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。

于 2014-01-21T07:13:55.320 に答える
53

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

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

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

<div class="no-animate"></div>
于 2015-06-19T20:54:17.073 に答える
52

特定の要素に対して ng-animate を無効にするには、Angular animate パラダイムに従う CSS クラスを使用して、正規表現を使用してクラスをテストするように 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/

于 2015-06-01T12:56:32.447 に答える
19

or$animate.enabled(false, $element);を使用する要素では機能することがわかりましたが、何らかの理由で使用する要素では機能しません! 私が最終的に使用した解決策は、CSS ですべてを行うことでした。これは、GitHub のこのスレッドから学びました。ng-showng-hideng-if

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;
  }
}
于 2015-01-09T14:25:06.267 に答える
2

を使用して最初のリストを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. */
于 2015-07-21T10:42:06.747 に答える