我最近在同一时间学习JavaScript和Angular,而且我对两者的了解都很有限。我正在构建一个音乐存档应用程序,以便更好地学习这两种技术并尝试使用ng-repeat构建滑块动画,此时,滑块在页面加载时动画到位,但是按钮加载下一个'组'没有运行动画。
我用Greensock编写了我的动画,并在Angular API文档中进行了结构化。如果有人知道为什么我的动画在每次点击按钮时都没有运行,我非常感激。
相关HTML ..
<div id="content-cent">
<div class="container-fluid">
<div class="row animation" ng-repeat="group in trackDataGroup" ng-hide="!isCurrentSlideIndex($index)">
<div class="col-sm-4" ng-repeat="track in group">
<div class="img-cont">
<img class="artwork" ng-src="{{track.art}}" />
</div>
<div class="txt-cont">
<h4>{{track.tit}}</h4>
<p>{{track.desc}}</p>
</div>
</div>
</div><!--end row-->
</div>
<img class="loadMore" src="public/img/dwn.png" ng-click="setCurrentSlideIndex()"/>
</div><!--end content-cent-->
.animate模块
app.animation('.animation', function() {
return {
enter : function(element, done) {
TweenMax.set(element, {x: "-50px", opacity: 0});
TweenMax.to(element, 0.5, {x:"0px", opacity: 1, ease:Back.easeInOut, onComplete: done});
},
leave : function(element, done) {
TweenMax.to(element, 0.5, {x:"50px", opacity: 0, ease:Back.easeInOut, onComplete: done});
},
move : function(element, done) {
TweenMax.set(element, {x: "-50px", opacity: 0});
TweenMax.to(element, 0.5, {x:"0px", opacity: 1, ease:Back.easeInOut, onComplete: done});
}
}
});
ng-app在html标记和body标记中的ng-controller中声明。
应用程序初始化为
var app = angular.module('musicApp', ['ngAnimate']);
并且大部分代码都在app.controller中。