Я следую этому руководству о том, как анимировать различные представления моего приложения. Анимация работает отлично, но в демо они не имеют 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' ;
}); });
Решение прост. Вы должны переместить заголовок за пределы анимированного контейнера или, альтернативно, переместить анимацию в контейнер, который хотите оживить. Полный HTML-код будет полезен.