頁面轉換爲可變頁面內容保留頁腳和頁眉

我正在使用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

頁面轉換爲可變頁面內容保留頁腳和頁眉

回答

相關問題