скольжение между переходами маршрута angularjs

Я работаю с Angular всего около недели, поэтому прошу прощения, если мой код дерьмовый.

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

В любом случае код ниже: Nav

<li><a ng-click="go('/')"  class = "intro currentLink navLinks">Intro</a></li>
<li><a ng-click="go('/why')"  class = "why navLinks">Why</a></li>
<li><a ng-click="go('/resume')" class = "resume navLinks">Res</a></li>
<li><a ng-click="go('/qualified')" class = "qualified navLinks">How</a></li>
<li><a ng-click="go('/contact')" class = "contact navLinks">Contact me</a></li>

взгляды)

<div class = "pages">
    <div ng-view id="slides" ng-animate="'slide'">
        <!--inside main view-->
    </div><!--end main view-->
</div><!--end pages-->

css

.slide-leave-setup {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
}
.slide-enter-setup {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
}
.slide-enter-setup {
    position: absolute;
    left: 1300px;
}
.slide-enter-start {
    left: 0;
}
.slide-leave-setup {
    position: absolute;
    left: -1700px;
}
.slide-leave-start {
    right: 0;
}

включает в себя

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.3/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular-sanitize.js"></script>
<script src="js/vendor/ui-bootstrap-custom-tpls-0.6.0.js"></script>

JavaScript:

var app = angular.module('MyApp', ['ui.bootstrap', 'ngSanitize', 'ngRoute', 'ngAnimate']);

Полный проект на https://github.com/arttay/blizz

Спасибо


angularjs ng-animate
person Art Taylor    schedule 28.11.2013    source источник
comment
посмотрите пример в ng-view документах... попробуйте просто установить класс не ng-animate docs.angularjs.org /api/ngRoute.directive:ngView   -  person charlietfl    schedule 28.11.2013
comment
Это был не ответ, но спасибо за совет по просмотру документов представления, я в основном смотрел на анимацию и маршрутизацию. Несколько хороших примеров внизу.   -  person Art Taylor    schedule 29.11.2013

Ответы (3)


arrow_upward
19
arrow_downward

Для тех, кто гугл это ....

Добавьте классы ng-enter/ng-leave/.ng-enter-active/.ng-leave-active в свои классы css. Пример

.slide-animate.ng-enter, .slide-animate.ng-leave{
 -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
   -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
 }


.slide-animate.ng-enter.ng-enter-active {
 position: absolute;
 left: 1300px;
}

.slide-animate.ng-enter {
 left: 0;
}

.slide-animate.ng-leave.ng-leave-active {
 position: absolute;
 left: -1700px;
 }

.slide-animate.ng-leave {
 right: 0;
 }

На Egghead.io также есть отличное видео по анимации, если вы хотите подробное руководство.

person Art Taylor    schedule 29.11.2013

arrow_upward
2
arrow_downward

Приведенные выше ответы верны... но я бы добавил, что наличие маршрутов с завершающей косой чертой:

.when('/introduction/', ...)

Сломает ваши переходы... Angular немедленно перенаправит вас на «/introduction», что нарушит переход. поэтому обязательно используйте:

.when('/introduction', ...)

Мне потребовалось около 5 часов, чтобы окончательно определить, почему мои переходы не будут работать... когда мои тестовые проекты и все примеры работали отлично.

person nawlbergs    schedule 02.07.2014

arrow_upward
1
arrow_downward

Если вы используете Angular 1.2.x, директива ngAnimate больше не нужна. В настоящее время Angular Animate использует .ng-enter и .ng-leave в качестве хуков для добавления ваших преобразований. Приведенная ниже статья показалась мне очень полезной для изучения нового способа создания анимаций именно так, как вы пытаетесь это сделать (путем анимации маршрутов, т. е. каждого фрагмента, который вставляется в директиву ngview).

Анимация приложений AngularJS: ngView

person britztopher    schedule 04.09.2014