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

我正在使用angular和css进行滑动页面转换，并且有一个很好的转换工作版本，类似于this plnker。这工作正常，但CSS是使用'绝对'，它把页面流中的元素排除在外，隐藏了其余部分 - 即页脚。页面转换为可变页面内容保留页脚和页眉

正在进行转换的内容因页面而异。页脚被隐藏，因为显示内容的许多父母的高度为0px;

因此，我删除了absolute，现在过渡发生了类似于this的情况，其中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是一个选项。

来源

2014-10-06 myol

我不明白为什么'position：absolute;'不是一个选项？它将这个元素从流中取出，但'.page-container'是相对的，所以这个元素就像流中的包装器一样。 – 2014-11-04 12:33:47

@JanHommes我记得试图让这个工作与一个页脚和挣扎。我希望页脚与页面顶部导航保持一致。也许位置：绝对可能是好的 – myol 2014-11-04 12:53:33

该元素对于下一个定位的元素总是绝对的。如果没有，那对身体来说是绝对的。所以如果你的页面转换是相对于你的容器div而页脚是相对于body而言的话，应该没有问题。 – 2014-11-04 12:56:38

Here you go.我编辑了你发布的第一个小提琴。造型是内嵌式的，因为我不能困扰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>

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

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

如果你想要一个动态页脚，你需要重新设置你的内容区域。我会以页边距为中心来标题和页脚项目：0 auto并且使内容完整宽度，其中的居中div是动画元素。它应该左右滑动，而不打破页脚。

请记住，如果您转换不同高度的项目，页脚会随着重新定位而抖动。也许可以考虑在你的页脚添加一个淡出它的回调动画，并在页面过渡动画播放和停止时再次添加。

来源

2014-11-05 04:06:47 Ucinorn

谢谢。实际上，我最终使用JavaScript（现在转换为angular）来获取内容高度，并将其分配为父div高度。仍然为您的努力和页脚动画的想法，我会给你的赏金，当它变得可用。 – myol 2014-11-05 09:23:11

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

回答

相关问题