2

次の AngularJS (v1.1.4) コードがあり、DOM に追加されたときに ng-include をフェードイン (アニメーション化) しようとしています。私は何を間違っていますか？また、「アクション」プロパティを監視するのではなく、追加/設定/削除コマンドをディレクティブに渡すより良い方法を誰かが提案できれば、それは大歓迎です。

プランカーはこちら: http://plnkr.co/edit/rcgpI0n8fGWj6o01Mp3b?p=preview

index.html

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="styles.css" />
  <script>document.write('<base href="' + document.location + '" />');</script>
  <script src="http://code.angularjs.org/1.1.4/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">

  <button ng-click="loadPartial('partial1.html')">Click to load partial 1</button>
  <button ng-click="loadPartial('partial2.html')">Click to load partial 2</button>
  <button ng-click="loadPartial('partial3.html')">Click to load partial 3</button>

  <div views></div>

</body>
</html>

app.js

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

app.controller('MainCtrl', ['$scope', 'viewsAPI', function(scope, viewsAPI) {

  scope.loadPartial = function (name) {
    viewsAPI.addView(name);
  };

}]);


app.factory('viewsAPI', function () {

    return {
        views: [],
        action: null,
        addView: function (viewName, options) {
            var view = { name: viewName, options: options };
            this.action = { type: 'add', view: view };
        },
        setView: function (viewName, options) {
            var view = { name: viewName, options: options };
            this.action = { type: 'set', view: view };
        },
        removeView: function () {
            this.action = { type: 'remove' };
        }
    }
});


app.directive('views', ['$compile', function (compile) {

    return {
        restrict: 'A',
        scope: {},
        replace: true,
        template: '<div class="views"></div>',

        controller: ['$scope', 'viewsAPI', function (scope, viewsAPI) {

            scope.api = viewsAPI;

            scope.$watch('api.action', actionChange, true);

            function actionChange (action) {

                if (!action) return;

                if (action.type == 'add') {
                    var view = scope.addView(action.view);
                    scope.api.views.push(view);
                }
                else if (action.type == 'set') {
                    scope.setView(action.view);
                }
                else if (action.type == 'remove') {
                    scope.removeView();
                }
            }
        }],

        link: function (scope, elm) {

            scope.addView = function (view) {
                var v = compile('<div class="view-wrapper" ng-include="\'' + view.name + '\'" ng-animate="fade"></div>')(scope);
                elm.append(v);
                return v;
            };

            scope.setView = function (view) {
            };

            scope.removeView = function () {
            };
        }
    };
}]);

スタイル.css

.fade-enter-setup { -webkit-transition: all 3s linear; opacity: 0; }
.fade-enter-setup { opacity: 1; }

partial1.html

<div>Hello I am a partial 1</div>

partial2.html

<div>PARTIAL 2-------------------</div>

partial3.html

<div>
33333333333333333333333333
<br />
this is partial 3
<br />
33333333333333333333333333
</div>
4

2 に答える 2

3

あなたがまだ興味を持っているなら、私は今日誤ってプランカーを作成しました.それはあなたのずっと前の質問に答えるはずです.

http://plnkr.co/Gd5f6J

最新の 1.2 安定版リリースでは、Angular が ngAnimate モジュールを検出すると、子が変更された ng-if、ng-switch、ng-view などの組み込みディレクティブが検出されると、特定の css クラスが dom に追加されます。これらのクラスは CSS トランジションをトリガーするため、ビュー パーシャルの読み込みに時間がかかる場合は、完全に読み込まれたときにアニメーションが開始されます。

index.html:

<div class="view-animate-container">
  <div class="well slide" ng-view>
    <!-- view container. Asynchronously loaded view templates are placed here -->
  </div>
</div>

app.js:

angular.module('myApp', ['ngRoute', 'ngAnimate'])
.run(function($rootScope, $location){
  $rootScope.matchesRoute = function() {
    for(var i=0; i<arguments.length; i++) {
      if($location.path() === arguments[i]) {
        return true;
      }
    }
    return false;
  }
})
.config(function($routeProvider) {
    $routeProvider
      .when('/bellsAndWhistles', {templateUrl: 'bellsAndWhistles.html', controller: angular.noop()})
      .when('/about',            {templateUrl: 'about.html',            controller: angular.noop()})
      .otherwise({redirectTo: '', templateUrl: 'home.html'});
});

スタイル.css:

html, body{
  height: 100%;
}

.view-animate-container {
    position: relative;
    overflow: hidden;
    height:100%;
}

.view-animate-container > .slide.ng-enter,
.view-animate-container > .slide.ng-leave {
    -webkit-transition: all ease 0.5s;
       -moz-transition: all ease 0.5s;
         -o-transition: all ease 0.5s;
            transition: all ease 0.5s;  
    width: 100%;
    position:absolute;
}

.view-animate-container > .slide.ng-enter {
    left:100%;
    opacity: 0;
}
.view-animate-container > .slide.ng-enter.ng-enter-active {
    left:0;
    opacity: 1;
}
.view-animate-container > .slide.ng-leave.ng-leave-active {
    left: -100%;
    opacity: 0;
}
于 2013-11-17T10:01:32.253 に答える