css - 页面转换为可变页面内容保留页脚和页眉

Question

我正在使用 angular 和 css 进行滑动页面转换，并且有一个很好的转换版本，类似于 this plnker。这工作正常，但 css 使用的是“绝对”，它将有问题的元素从页面流中移除，隐藏了它的其余部分——即页脚。

正在转换的内容因页面而异。页脚是隐藏的，因为正在显示的内容的许多父项的高度为 0px；

所以我删除了 absolute，现在转换发生了类似 this 的事情，其中 div 再次出现在页面流中，但是当过渡 float 在彼此上方和下方时。

我可以使用转换使新的 div 进入与退出的 div 相同的级别，方法是更改​​

.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);
}

到

.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);
}

如图所示 plnker .然而，问题是 div 高度仍然影响页面，所以当新的 div 进入时你可以看到一个垂直滚动条并且页面的其余部分受到影响。

进入页面的 div 可以有不同的高度，所以我不认为简单地在父 div 上设置定义的高度并设置 overflow-y: hidden 是一个选项。

Answer 1

Here you go.我编辑了你发布的第一个 fiddle 。样式是内联的，因为我懒得更改 css，但你明白了。

  <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> 

您发布的示例使用固定位置标题和绝对定位的全屏内容区域。内容实际上在我添加的页眉和页脚下方左右移动。

还有其他方法可以做到这一点，但固定页眉和页脚通常适用于网络应用程序。

如果您想要动态页脚，则需要重新设计内容区域的样式。我会以 margin: 0 auto 居中你的页眉和页脚元素，并使内容全宽，其中有一个居中的 div，它是动画元素。它应该按照您的意愿左右滑动而不会破坏页脚。

请记住，如果您在不同高度的元素中转换，您的页脚会在重新定位时抖动。也许考虑在页脚上添加一个回调动画，当页面过渡动画播放和停止时，它会淡出和淡入。