Page transitions keeping a footer and header for variable page content - css

Question

I am using angular and css for sliding page transitions, and had a nice working version of transitions similar to this plnker. This worked ok but the css was using 'absolute' which took the element in question out of the flow of the page, hiding the rest of it - namely the footer.
The content of what is being transitioned in varies page to page. The footer is hidden because the many parents of the content being displayed have height 0px;
So I removed absolute and now the transitions happen something like this, where the divs are again in the flow of the page, but when transition are floated above and below each other.
I can use transitions to make the new div enter at the same level as the exiting div by changing
.slideRight.ng-leave {
transition-property: all;
transform: translate3d(0,0,0);
}
.slideRight.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(100%,0,0);
}
to
.slideRight.ng-leave {
transition-property: all;
transform: translate3d(0,-100%,0);
}
.slideRight.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(100%,-100%,0);
}
as shown in this plnker. However, the issue is that the div height is still affecting the page, so you can see a vertical scroll bar as the new div enters and the rest of the page is affected.
The divs which enter the page can be different heights, so I don't think simply setting a defined height on a parent div and setting overflow-y: hidden is an option.

Answer 1

Here you go. i edited the first fiddle you posted. Styling is inline because I couldnt be bothered changign the css but you get the drift.
<nav>
<a ng-click="go('/page1', 'slideLeft')">Page 1</a>
<a ng-click="go('/page2', 'slideRight')">Page 2</a>
<a ng-click="go('/page3', 'slideDown')">Page 3</a>
<a ng-click="go('/page4')">Page 4</a> <!-- note: no transition specified -->
</nav>
<!-- App Content Container -->
<div class="page-container">
<div ng-view="" class="page-view" ng-class="pageAnimationClass"></div>
</div>
<footer>
<div style="height: 50px; width:100%; position: fixed; bottom: 0; display: block; background: white; "><br>Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer</div>
</footer>
The example you posted uses a fixed position header with an absolutely positioned full screen content area. The content actually moves right and left underneath the header and the footer i added.
There are other ways to do it but fixed headers and footer generally work well with web apps.
if you wanted a dynamic footer, you would need to restyle your content area. I would center your header and footer items with a margin: 0 auto and make the content full width, with a centered div inside it that is the animated element. It should slide left and right as you intend without breaking your footer.
Keep in mind though that if you transition in items of differing height your footer will jitter as it repositions itself. Maybe consider adding a callback animation on your footer that fades it out and in again whenever the page transition animation plays and stops.