web-dev-qa-db-ja.com

一部の要素のnganimateを無効にします

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

ありがとう。

angularjsng-animate
92
drtobal

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

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

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

<div class="no-animate"></div>
53
David Addoteye

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

104
Gloopy

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

80
michael

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

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);
    };
});
44
user1750709

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

Config

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

使用法

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

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

43
Blowsie

$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;
  }
}
18
CBarr

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

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

これを別の提案として投稿するだけです！

3
Betty St

ng-hide="$first"を使用して最初のliを非表示にするリストがあります。 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. */
2
robro

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

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

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

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

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

これにより、不透明度が適切に設定され、ui-selectが機能します。

0
David Branco