角JS动画不工作，(使用ngAnimate和TweenMax)
角JS动画不工作，(使用ngAnimate和TweenMax)
提问于 2014-08-08 18:06:01
好的，这是我的代码：
(function(){//定义角主模块-模块-
var app = angular.module('module', ['ngAnimate']);//定义控制器-时间线-
app.controller('TimeLine', function(){
this.initialize = true;
});//定义控制器-PersonalGravatar-
app.controller('PersonalGravatar', function(){
this.email = "mail@gmail.com";
this.getImage = function(email) {
// MD5 (Message-Digest Algorithm) by WebToolkit
var size = size || 460;
return 'http://www.gravatar.com/avatar/' + MD5(email) + '.jpg?s=' + size;
};
});//定义动画-凹模-
app.animation(".gravatar", function() {
console.log("im displaying correctly");
//that's it, this next 'return' is not working.
return {
console.log("im NOT displaying in console");
enter: function(element, done){
TweenMax.to(element, 2, { css:{left:500, onComplete:done} } );
},
leave: function(element, done){
// TweenMax.to(element, 2, { css:{left:500, onComplete:done} } );
}
};
});
})();那么我的html代码是：
<html class="no-js" ng-app="module">
... more code ...
<div id="app-main-container" ng-controller="TimeLine as animations">
<div id="gravatar" class="gravatar" ng-controller="PersonalGravatar as gravatar"
ng-if="animations.initialize">
<img ng-src="{{gravatar.getImage(gravatar.email)}}" alt="">
</div>
</div> <!-- /app main container -->
<script src="../1.2.18/angular.min.js"></script>
<cript src="../1.2.18/angular-animate.min.js"> </script>
<script src="../1.12.1/TweenMax.min.js"></script>
<script src="js/main.js"></script>所以我是angularJS的新手，我不知道为什么app.animation不返回任何动画。非常感谢！！
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-08-11 17:26:10
只有$timeout..。
app.controller('TimeLine', function($scope, $timeout){
return $timeout(function() {
$scope.initialize = true;
}, 100);
});Stack Overflow用户
发布于 2014-08-14 03:38:38
我创建了一个你的例子的Plunk动画的回车和离开。
请注意，您不再需要将CSS属性包装在css对象中。
enter: function(element, done){
TweenMax.from(element, 1, {x:500, autoAlpha: 0, scale: 0.5, onComplete:done});
},
leave: function(element, done){
TweenMax.to(element, 1, {x:500, autoAlpha: 0, scale: 0.5, onComplete:done});
}柱塞http://plnkr.co/edit/6tQFdA?p=preview
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25209614
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号