web-dev-qa-db-ja.com

ng-animateはng-enterクラスとng-leaveクラスを追加しません

これはAngularを使用する最初のプロジェクトであり、ng-animateで問題が発生します。私はいくつかのチュートリアルを行いましたが、チュートリアルではすべてがうまくいきました。現在、プロジェクトにAngularを使用していますが、ng-animateを正しく動作させることができません。 「ng-enter」や「ng-leave」などのクラスは、別の要素には追加されません。

私はあらゆる種類の作業スクリプトを私のものと比較しましたが、私が間違っていることを見つけることができません。

私のヘッダー：

<link rel="stylesheet" href="css/app.css">

<script src="js/libraries/jquery-2.1.1.min.js"></script>
<script src="js/libraries/angular.js"></script>
<script src="js/libraries/angular-animate.js"></script>
<script src="js/libraries/angular-resource.js"></script>
<script src="js/libraries/angular-route.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

私のHTML：

<div class="view-container">
<div ng-view class="{{pageclass}} view-frame"></div>
</div>

私のapp.js

'use strict';

/* App Module */

var engineShowcaseApp = angular.module('engineShowcaseApp', [
  'ngRoute',
  'ngAnimate',
  'engineShowcaseController',
  'engineShowcaseServices'
]);

engineShowcaseApp.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/main.html',
        controller: 'MainCtrl'
      }).
      when('/chapters/:chapterID', {
        templateUrl: 'partials/chapter.html',
        controller: 'ChapterCtrl'
      });
  } ]);

私のcontrollers.js：

'use strict';

/* Controllers */

var engineShowcaseController = angular.module('engineShowcaseController', []);

engineShowcaseController.controller('MainCtrl', function ($scope, Main) {
    $scope.pageclass = "page-home";
    $scope.hotspots = Main.query();
});


  engineShowcaseController.controller('ChapterCtrl', function ($scope, $routeParams, Main) {
    $scope.pageclass = "page-chapter";
      $scope.chapter = Main.get({ chapterID: $routeParams.chapterID });
  });

最初/メインのページのHTML：

<div 
    ng-repeat="hotspot in hotspots" 
    class="hotspot hotspot-{{hotspot.id}}" 
    data-nextup="chapter-{{hotspot.id}}" 
    data-startframe="{{hotspot.startFrame}}" 
    data-endframe="{{hotspot.endFrame}}">

    <a  href="#/chapters/{{hotspot.chapterID}}">
        {{hotspot.label}}
    </a>
</div>

'hotspot'クラスのdivが正しい場合、 'ng-enter'クラスと 'ng-leave'クラスを受け取る必要がありますが、どういうわけかそれらは受け取りません。

誰かがこれを手伝ってくれませんか？何が悪いのですか？どうもありがとう！！

angularjsangularjs-ng-repeatng-animate
19
Frank Biemans

あなたがチェックアウトを支払うべきいくつかのこと：

  1. angularを使用しています。バージョン1.2からのアニメーションの動作は異なります。 Remastered Animation
  2. また、ng-animateの哲学は、CSSクラスの追加と削除のタイミングを計っているので、実際のアニメーションはCSSで定義する必要があります（ユーザーが指定しなかったため、何が問題かを理解するのが難しいため）。
  3. さらに、「実際の」アニメーションはng-leave.ng-leave-activeおよびng-enter.ng-enter-active、行われます。詳細については、記事をご覧ください。
  4. ここにあなたに有利なスタートを与える非常に単純な例があります： Simple Plunker Example
3
Tomer

Angularバージョン1.2以降）を使用する場合、アニメーション化する要素のCSSクラスアニメーションを宣言し、モジュールに「ngAnimate」を挿入する必要があります。

 var app = angular.module('myApp', ['ngAnimate']);
.element.ng-enter {
  transition: all linear 500ms;
  opacity: 0;
}
.element.ng-enter-active {
  opacity: 1;
}
.element.ng-leave {
  transition: all linear 500ms;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.element.ng-leave-active {
  opacity: 0;
  transform: translate3d(100px, 0, 0);
}
0
Renato Longobardi