Question

我需要使用动态转换在不同的ng-include模板之间进行转换例如，从A过渡到B：

页面A从左侧进入 - ＆gt;通过右侧叶页面B从底部进入 - ＆gt;从顶部开始

我已经完成了它看起来不错。但是 - 似乎动画模块中的完成回调永远不会被调用，因此动态包含的模板永远不会被删除...所以我得到节点元素在屏幕外累积。

我正在设置动画的HTML标记有以下设置：

NG-包括=＆＃34; pageData.template＆＃34;
类=＆＃39; {{pageData.animation}}＆＃39;

和一个看起来像这样的动画模块：

(function() {

angular.module('xxxxxxxx')
.animation('.slide-up', [slideUp])
.animation('.slide-down', [slideDown])
.animation('.slide-right', [slideRight])
.animation('.slide-left', [slideLeft]);

var bottom =    { top:"100%", };

var mid =       { top:"0",  left:"0", };

var top =       { top:"-100%", };

var left =      { left:"-100%", };

var right =     { left:"100%", };

function slideUp(){
    return {
        enter: function(element, done){
            console.log('entering animation: slideup');
            element.css('position','absolute');
            element.css(bottom);
            Velocity(element, mid, 
                            {   duration : xxxxxxxx.animation.duration,
                                end: done, 
                            });
        },

        leave: function(element, done){
            console.log('leaving animation slideup');
            element.css('position','absolute');
            element.css(mid);
            Velocity(element, top, 
                            {
                                duration : xxxxxxxx.animation.duration,
                                end: done,
                            }
                );
        },


};
}

function slideRight(){
    return {
        enter: function(element, done){
            console.log('entering animation slideRight');
            element.css('position','absolute');
            element.css(left);
            Velocity(element, mid, 
                            {
                                duration : xxxxxxxx.animation.duration,
                                end: done,
                            }
                );
        },
        leave: function(element, done){
            console.log('leaving animation slideRight');
            element.css('position','absolute');
            element.css(mid);
            Velocity(element, right, 
                            {
                                duration : xxxxxxxx.animation.duration,
                                end: done,
                            }
                );
    },
};
}
... continued

通过设置$ scope.pageData.animation和$ scope.pageData.template变量来触发转换。

我对实现同一目标......未来的更明智的方式感兴趣。以及推进此实施的任何hackish想法。

感谢

动态动画的ng-include不触发完成回调

0 个答案: