AngularJS - Анимация ng-view переходов

У меня есть 2 html-страницы, welcome.html и login.html, оба из которых "вставлены" в index.html, зависящие от URL-адреса, через атрибут ngview и поставщик маршрутизатора, как часть моего приложения AngularJS.

Пример этого можно найти на домашней странице AngularJS в разделе Подключить бэкэнд.

Мой вопрос: Есть ли способ оживить переход между welcome.html и login.html?

Ответы

Ответ 1

Angularjs 1.1.4 теперь ввел директиву ng-animate, чтобы помочь анимировать различные элементы, в частности ng-view.

Вы также можете посмотреть видео об этой новой игре

UPDATE по сравнению с angularjs 1.2, то, как работа анимаций сильно изменилась, большая часть из них теперь управляется с помощью CSS, без необходимости настраивать обратные вызовы javascript и т.д. Вы можете проверить обновленный учебник Year of Moo. @dfsq отметил в комментариях хороший набор примеров.

Ответ 2

Проверьте этот код:

JavaScript:

app.config( ["$routeProvider"], function($routeProvider){
    $routeProvider.when("/part1", {"templateUrl" : "part1"});
    $routeProvider.when("/part2", {"templateUrl" : "part2"});
    $routeProvider.otherwise({"redirectTo":"/part1"});
  }]
);

function HomeFragmentController($scope) {
    $scope.$on("$routeChangeSuccess", function (scope, next, current) {
        $scope.transitionState = "active"
    });
}

CSS

.fragmentWrapper {
    overflow: hidden;
}

.fragment {
    position: relative;
    -moz-transition-property: left;
    -o-transition-property: left;
    -webkit-transition-property: left;
    transition-property: left;
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s
}

.fragment:not(.active) {
    left: 540px;
}

.fragment.active {
    left: 0px;
}

Главная страница HTML:

<div class="fragmentWrapper" data-ng-view data-ng-controller="HomeFragmentController">
</div>

Пример частичных HTML:

<div id="part1" class="fragment {{transitionState}}">
</div>

Ответ 3

Я не уверен в том, как сделать это напрямую с помощью AngularJS, но вы можете настроить отображение как на приветствие, так и на вход и анимировать непрозрачность с помощью директивы после их загрузки.

Я бы сделал это так. 2 Директивы для затухания в содержимом и выцветания при нажатии ссылки. Директива для fadeouts может просто анимировать элемент с уникальным идентификатором или вызвать службу, которая транслирует fadeout

Шаблон:

<div class="tmplWrapper" onLoadFadeIn>
    <a href="somewhere/else" fadeOut>
</div>

директивы:

angular
  .directive('onLoadFadeIn', ['Fading', function('Fading') {
    return function(scope, element, attrs) {
      $(element).animate(...);
      scope.$on('fading', function() {
    $(element).animate(...);
      });
    }
  }])
  .directive('fadeOut', function() {
    return function(scope, element, attrs) {
      element.bind('fadeOut', function(e) {
    Fading.fadeOut(e.target);
  });
    }
  });

Услуги:

angular.factory('Fading', function() {
  var news;
  news.setActiveUnit = function() {
    $rootScope.$broadcast('fadeOut');
  };
  return news;
})

Я просто собрал этот код быстро, чтобы могли быть некоторые ошибки:)

Ответ 5

1.Установить angular -animate

2. Добавьте эффект анимации к классу ng-enter для анимации ввода страницы, а класс ng-leave для страницы, выходящей из анимации

для справки: на этой странице есть бесплатный ресурс в angular переходе вида https://e21code.herokuapp.com/angularjs-page-transition/