Angular - 在 ngAnimate 动画视图时保持 header 固定

Question

我正在关注 this 关于如何为我的应用程序的不同视图设置动画的教程。动画效果很好，但在演示中他们没有导航栏。

我想让 Navbar 不为我的应用程序设置动画，而只为 ng-view 设置动画。现在 Navbar 移动了位置并且看起来有问题。我认为这是一个 Z-index 问题，但这似乎根本无法解决问题。

当 ng-view 动画时，如何防止导航栏移动？

索引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;
}

Header 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' ;
}); });

Answer 1

解决方法很简单。您必须将页眉移到已设置动画的容器之外，或者将动画移动到要设置动画的容器中。完整的 HTML 源代码会有所帮助。

Angular - 在 ngAnimate 动画视图时保持 header 固定

Angular - Keep header fixed while ngAnimate animates view

css

angularjs

ng-animate