这是我使用Angular的第一个项目,我在使用ng-animate时遇到了一些麻烦。我做了几个教程,在这些教程中,我让所有的东西都工作得很好。现在我正在为一个项目使用Angular,我就是无法让ng-animate正常工作。诸如"ng-enter“和"ng-leave”之类的类不会添加到不同的元素中。
我已经将各种工作脚本与我的脚本进行了比较,但就是找不到我做错了什么。
我的header:
<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”类……但不知何故,他们并没有。
有人能帮我解决这个问题吗?我做错了什么?非常感谢!
发布于 2014-12-22 19:45:35
如果你使用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);
}
https://stackoverflow.com/questions/23806170
复制相似问题