Блог

У меня есть div с ng-include для отображения содержимого из внешних файлов.

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

Чтобы назначить другую анимацию для изменений содержимого, я использую ng-class с присвоенным var animClass. Перед назначением нового 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);
    }
}
});
  

Я создал этот плунжер, и он работает почти нормально. При переходе со страницы 1 на страницу 4 используется анимация ‘moveLeft’, а со страницы 4 на 1 используется анимация ‘moveRight’.
Однако при изменении направления используется сочетание обеих анимаций.
Я понятия не имею, как это исправить.