我有以下 AngularJS (v1.1.4) 代码，并尝试在将 ng-include 添加到 DOM 时淡入(动画)它。我究竟做错了什么？另外，如果有人可以建议一种更好的方法将添加/设置/删除命令传递给指令而不是观察“action”属性，我们将不胜感激。
Plunker在这里: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; }
part1.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>
最佳答案
如果您仍然感兴趣，我今天无意中创建了一个 plunker，它应该可以回答您很久以前的问题。
现在，在最新的 1.2 稳定版本中，如果 Angular 找到 ngAnimate 模块，它会向 dom 添加特定的 css 类，当检测到 ng-if、ng-switch、ng-view 等内置指令时，该子元素将被添加到 dom 中。已经改变。这些类会触发您的 CSS 转换，因此如果您的 View 部分需要很长时间才能加载，动画将在完全加载后开始。
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;
}
关于javascript - AngularJS - 如何对动态编译和添加的 ng-include 进行动画处理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16462183/