Я новичок в Угловой анимации, и у меня возникают проблемы с переходом на маршруты с анимацией.Переходы с угловым анимированием в зависимости от источника и адресата

Я использую ng-route и ng-animate.

Допустим, что у меня есть три вида: page1.html, page2.html и page3.html, которые показаны в моем индексном файле с ng-view в зависимости от url (/ page1,/page2 и/page3).

Теперь, если отображается текущий url/page1 (и показан page1.html), я знаю, как добавлять классы CSS с помощью ng-enter и ng-leave, чтобы сделать переходы между страницами приятными. У меня возникают проблемы с обработкой различных анимаций в разных состояниях.

Например, если я добавлю все правила CSS, чтобы сделать page1 скольжением влево, когда вы оставляете url/page1 и page2, чтобы сместиться справа при вводе url/page2, все хорошо. Но что, если я хочу, чтобы переход между page1 -> page3 был сдвинут вверх страницы1 вниз, а страница 3 сползала вниз?

Это то, что я хочу иметь:

стр.1 -> Page2 (слайд влево эффект)
PAGE2 -> page1 (слайд правильный эффект)
стр.1 -> page3 (слайд вниз эффект)
Page3 -> стр.1 (слайд вверх эффект)
страница2 -> Page3 (эффект плавного увеличения громкости)
Page3 -> страница2 (эффект плавного увеличения громкости)

Как вы можете видеть, мои анимации зависят от исходного и целевого URL/страницы, а не просто от входа или выхода страницы. Есть ли способ достичь этого?

Thanks

источник

2014-09-22 Lucas Wiener

TL; DR: проверьте этот plunkr. http://plnkr.co/edit/sIWfBnHww9EVi9TuphTv

Используя теорию ngRoute ...

Как мне это сделать, это, добавив атрибут состояния в тело тега. Для этого вам нужно сделать $ маршрут доступен на

angular.module('myapp', []) 
.run(function($rootScope, $location){ 
    $rootScope.$route = $location; 
}) 

.controller('MyCtrl', function($rootScope, $location){ 
    $rootScope.previousLocation; 
    $rootScope.newLocation; 
    $rootScope.$on('$routeChangeStart', function(){ 
    $rootScope.previousLocation = $location.path(); 
    }) 
    $rootScope.$on('$routeChangeSuccess', function(){ 
    $rootScope.newLocation = $location.path(); 
    }) 
})

Затем в HTML:

<body ng-controller="MyCtrl" new-location="{{ newLocation }}">

Это, однако, отстой б * LLS как ваши CSS селекторов для анимации будет что-то вроде [new-location*="Books/view"] .ng-enter-active{}.

Использование намного превосходит ui.router

Я бы рекомендовал использовать ui-router для управления состояния, чтобы сделать это немного легче.Поскольку все государства названы, вы можете прикрепить текущее состояние:

angular.module('myapp', []) 
.run(function($rootScope, $state){ 
    $rootScope.$state = $state; 
}) 

<body state="{{ $state.current.name }}">

В этом случае ваши CSS селекторы, чтобы анимировать будет что-то вроде этого:

body[state="books.view"] [ui-view].ng-enter{}

К сожалению ... это все немного jibberish , См. Рабочий стол для рабочего примера.

... СМОТРИТЕ ЭТО PLUNKR http://plnkr.co/edit/sIWfBnHww9EVi9TuphTv

источник

2014-10-01 12:54:15 harelpls

Привет и спасибо за ваш ответ. Я тоже смог узнать, в каком состоянии мое приложение находится в данный момент, аналогичным методом, предоставленным вами примером ngRoute. Тем не менее, я чувствую, что у вашего ответа не хватает одного: быть в состоянии иметь разные ng-enter, например, «books.view», в зависимости от того, из какого состояния оно переходит. TLDR: Мне нужно сделать анимацию CSS на основе предыдущего состояния и нового состояния, а не только текущего состояния. Я обновил ваш plunkr немного, чтобы показать, что я хочу: http://plnkr.co/edit/y6qL5tGyM4lh0PfR1fAc Надеюсь, вы понимаете, чего я хочу :) –

Переходы с угловым анимированием в зависимости от источника и адресата

ответ

Используя теорию ngRoute ...

Использование намного превосходит ui.router

Смежные вопросы