Angular - Keep header fixed while ngAnimate animates view

Question

I am following this tutorial on how to animate to different views of my app. The animation works fine, but in the demo they do not have a Navbar.

I want to have a Navbar not animate for my app and just animate the ng-view. Right now the Navbar moves out of place and looks glitchy. I thought it was a Z-index problem, but that does not seem to fix it at all.

How can I keep the Navbar from moving when the ng-view is animated?

Index 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

The solution is simple. You must move the header outside of the container that is animated or alternatively move the animation to the container that you want to animate. The full HTML source code would be helpful.