Angular - фиксировать заголовок, пока анимируется представление ngAnimate.

Question

Angular - фиксировать заголовок, пока анимируется представление ngAnimate.

0

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

Я хочу, чтобы Navbar не отображался для моего приложения и просто анимировал ng-view. Прямо сейчас Navbar уходит с места и выглядит глючным. Я думал, что это проблема с Z-индексом, но это, похоже, не исправляет ее вообще.

Как я могу заставить Navbar перемещаться, когда анимация ng-анимирована?

Индекс Html

<div data-ng-controller="HeaderCtrl">
    <div class="top-header" data-ng-include="templateUrl"></div>
</div>

<div class="page [[ pageClass ]]" ng-view></div>

CSS

/* Page Animations */
/* slide in from the bottom */
@keyframes slideOutUp {
to      { transform: translateY(-100%); }
}
/* slide in from the right */
@keyframes slideInDown {
from    { transform:translateY(-100%); }
to      { transform: translateY(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
from    { transform:translateY(100%); }
to      { transform: translateY(0); }
}
.ng-enter {
animation: slideInDown .3s both ease-in;
z-index: 7777;
}

.ng-leave { 
animation: slideOutUp .3s both ease-in; 
z-index: 8888; 
}

.top-header {
z-index: 9999;
}

Заголовок Javascript

app.controller('HeaderCtrl', function($scope, $location) {
$scope.pageClass = 'top-header';
$scope.$on('$locationChangeSuccess', function(event, newurl, prevurl) {
    $scope.templateUrl = $location.path()==='/signin' ? 'pages/SigninHeader.html' : 'pages/NormalHeader.html' ;
}); });

Austin Perez 25 июнь 2015, в 20:53

Источник

Теги:

angularjs

css

ng-animate

1 ответ

Ещё вопросы

Lothre1 · Accepted Answer · 2015-06-26T05-11-00.000Z

Решение прост. Вы должны переместить заголовок за пределы анимированного контейнера или, альтернативно, переместить анимацию в контейнер, который хотите оживить. Полный HTML-код будет полезен.

Спасибо, это потому, что ng-include также анимирует с помощью ng-view. Я закончил тем, что дал определенным страницам класс, а затем добавил это с помощью ng-enter и ng-exit. например: .signin.ng-enter {animation: slideInDown .3s оба упрощены; }