web-dev-qa-db-ja.com

AngularJS 1.2-ngAnimateが機能しない

AngularJS 1.2でng-animateを使用するのは初めてです。私のng-animateが特定のクラス名で動作しないのはなぜかわかりませんが、例で見た単純なフェードインのデフォルトで動作します。

この例では、ng-animateクラスを「animation」に設定しようとしています： http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

しかし、デフォルトを使用し、アニメーションのクラス名が「.ng-enter」と「.ng-leave」である場合、フェードインアニメーションは正常に機能するようです。

http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=preview

どんな助けも大歓迎です、ありがとう！

angularjsangularjs-ng-repeatng-animate
23
changus

Ng-animate属性は1.2で非推奨になりました。

1.2では、特別な命名規則を使用して適切なCSSクラスを定義します。 「アニメーション」などの特定の名前が必要な場合は、アニメーション化する要素にそのクラスを追加する必要があります。

正しいCSSクラスがある限り、一部のディレクティブは自動的にアニメーション化されます。ここで見つけることができるもの： http://docs.angularjs.org/api/ngAnimate

これが、「。ng-enter」クラスを定義するだけで、2番目の例でアニメーションが機能する理由です。ただし、これにより、enterアニメーションをサポートするすべてのディレクティブが自動的にアニメーション化されます。

「アニメーション」という名前のクラスで動作するように、最初の例を更新しました。

HTML：

<li ng-repeat="item in items" class="animation">{{item}}</li>

CSS（わかりやすくするためにセレクターをグループ化しないようにします）：

.animation {
  -webkit-transition: 1s;
}

.animation.ng-enter {
  opacity: 0;
}

.animation.ng-leave {
  opacity: 1;
}

.animation.ng-enter.ng-enter-active {
  opacity: 1;
}

.animation.ng-leave.ng-leave-active {
  opacity: 0;
}

プランカー：http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=preview

77
tasseKATT

モジュール定義への依存関係としてアニメーションモジュールを追加することも忘れないでください。他の誰かがアニメーションの動作に問題を抱えていて、これを行っていない場合に備えて。

angular.module('myApp', ['ngAnimate']);
14
Ben

Angular.min.jsのバージョンがangular-animate.min.jsのバージョンと一致することを確認する必要があります。
この方法で修正されました。

9
SANGEET MANGHNANI

Tasseがng-animateは非推奨であると言ったように、クラスを使用する必要があります。 angularjs WebサイトからCSSをコピーする場合 http://www.nganimate.org/angularjs/ng-repeat/move その後、特定の形式でそれらのCSSを変更する必要があります

完全な詳細チェックのために 2分でAngularjsアニメーションを適用

0
Ali Adravi

これは、ng-showディレクティブを使用して要素をアニメーション化しようとしている人にとって、受け入れられている答えに追加されます。使用する必要があるスタイルは次のとおりです。

.animation.ng-hide-remove {
  transition:2s linear all;
  opacity:0;
}

.animation.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

すべてのangularディレクティブがng-enter, ng-enter-active, ng-leave and ng-leave-activeを追加するわけではありません。たとえば、ng-showディレクティブは、アニメーションの先頭にng-hide-removeを追加し、ng-hide-remove-active詳細については、次のリンクを参照してください。 https://www.w3schools.com/angular/angular_animations.asp

0
Dipendu Paul