Анимация просмотра навигации вперед и назад

Question

Итак, Angular 1.2 имеет полную поддержку ng-animate, и я использую ее для переходов страниц - первоначальная настройка была достаточно простой, потрясающей. Вперед анимации (слева направо), без проблем. Обратная навигация? Вопросы.

Теоретически это работает: см. Пример http://codepen.io/ed_conolly/pen/aubKf. Тем не менее, я пытаюсь заставить его работать на событиях навигации; $locationChangeStart, например.

Что я наблюдаю, так это то, что когда начинается переход страницы, Angular создает второй div 'ng-view', затем применяет класс.ng-left к старому и.ng-enter к новому.

(Горстка) примеров, которые я нашел, говорят мне просто добавить класс "назад" к представлению с перевернутой анимацией, чтобы он пошел другим путем. Это работает... но не совсем.

Что я вижу, так это то, что класс "назад" применяется только к новому представлению, а не к старому (нг-уходящий).

ТЛ; др:

• Я использую неправильное событие? Есть ли событие, которое запускается до того, как будет создано и анимировано второе представление, т. Е. Перед $locationChangeStart?
• Можно ли вообще сделать это с событием или мне нужно вызвать специального помощника для события навигации? Это сломало бы собственные функции истории браузера, кстати.
• Можно ли вообще сделать это в ванильном Angular или мне нужен angular-ui?

Answer 1

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

Однако, чтобы обойти любые проблемы, связанные с тем, какие классы добавляются в какой пользовательский интерфейс, вы можете добавить класс "назад" в родительский div представлений (в вашем примере это div с классом viewWrap) и указать Анимации это в селекторе CSS. Так что вместо

.back.container.ng-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
}

ты бы

.back .container.ng-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
}

(Обратите внимание на пробел после .back)