Question

我有一个带有ng-include的div来显示来自外部文件的内容。

<div style="height:100%; width: 100%;" ng-class="animClass"
     ng-include="templateUrl"></div>

要为内容更改指定不同的动画，我使用的是带有指定的var animClass的ng-class。在分配新的templateUrl之前，在单击处理程序中分配了一个新的animClass：

    var currNr;
    $scope.onClick = function (nr) {
    if (nr < currNr) {
        $scope.animClass = 'moveRight';
    } else {
        $scope.animClass = 'moveLeft';
    }
    currNr = nr;
    $scope.templateUrl = 'page' + nr + '.html';
    }

要为内容更改设置动画，我使用以下JavaScript：

app.animation('.moveLeft', function () {
return {
    enter: function (element, done) {
        element.css({
            position: 'absolute',
            width: '100%',
            left: '100%'
        }).animate({
            left: 0
        }, 1500, done);
    },
    leave: function (element, done) {
        element.css({
            position: 'absolute',
            width: '100%',
            left: '0%'
        }).animate({
            left: '-100%'
        }, 1500, done);
    }
}
});

app.animation('.moveRight', function () {
return {
    enter: function (element, done) {
        element.css({
            position: 'absolute',
            width: '100%',
            left: '-100%'
        }).animate({
            left: '0%'
        }, 1500, done);
    },
    leave: function (element, done) {
        element.css({
            position: 'absolute',
            width: '100%',
            left: '0%'
        }).animate({
            left: '100%'
        }, 1500, done);
    }
}
});

我创建了this plunker，它的工作原理几乎没问题。通过点击第1页到第4页，动画＆＃39; moveLeft＆＃39;使用和从第4页到第1页动画＆＃39; moveRight＆＃39;用来。但是，通过改变方向，可以使用两种动画的混合。我不知道如何解决这个问题。

如何更改ng-include的动画？

0 个答案: