角动画ng重复幻灯片

时间:2014-10-13 16:30:22

标签: javascript angularjs animation

我最近在同一时间学习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中。

0 个答案:

没有答案
相关问题