僅CSS具有過渡/轉換的分頁

Question

有沒有一種方法可以僅使用CSS來實現類似的功能（按鈕單擊處理程序除外）？

考慮一個分頁面板：

<< < 1 2 3 4 5 > >>

當點擊右>按鈕，我要的條目滑動1至5向左“后面” << <按鈕和也6 7 8 9 10應該從右側滑入（從“后面”開始> >>紐扣）。

結果應為<< < 6 7 8 9 10 > >>

同樣應該在另一個方向上工作。

Answer 1

大概的概念

解決方案是將頁面鏈接布置在一條水平線上。 實現這一目標的一個方法是把它們放在一個列表中，設置display:inline的<li> S和white-space:nowrap在<ul>

接下來，您必須確保除前5個鏈接之外的所有鏈接都是隱藏的。 這可以通過將固定width與text-overflow:clip和overflow:hidden結合使用來實現。 我必須承認，我盯着寬度的值。

滾動效果可以通過使用javascript設置一些屬性來實現，並且在CSS中使用transform: translateX()和transition: translateX如果已設置該屬性）。

編碼

僅通過Chrome進行了測試，我不能保證此代碼可與其他任何瀏覽器一起使用

 var pages = document.getElementById("pages") var scroll = Number(pages.dataset.scroll); function scrollLeft() { scroll += 1; pages.dataset.scroll = scroll; } function scrollRight() { scroll -= 1; pages.dataset.scroll = scroll; } 

 .pager a { display: inline-block; background-color: #aaa; color: #fff; width: 2em; text-align: center; padding: .5em 0; text-decoration: none; margin: 0 .25em; } .pager ul { list-style-type: none; margin: 0; padding: 0; float: left; } .pager ul li { display: inline; } #pages { width: 13.75em; white-space: nowrap; overflow: hidden; text-overflow: clip; float: left; } #pages ul { transition: transform .5s ease; } #pages[data-scroll='1'] ul { transform: translateX(-13.75em); } 

 <div class="pager"> <ul class="prev-links"> <li><a href="#">&lt;&lt;</a></li> <li><a href="javascript:scrollRight();">&lt;</a></li> </ul> <div id="pages" data-scroll="0"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> </ul> </div> <ul class="next-links"> <li><a href="javascript:scrollLeft();">&gt;</a></li> <li><a href="#">&gt;&gt;</a></li> </ul> </div> 

有待改進

此代碼不檢查任何界限。 因此，每次單擊<或>都將更改變量scroll是否有意義。

對於每一步，您都必須包含一個新指令，因此，如果您有3個步驟（即，超過10頁），則必須添加

#pages[data-scroll='2'] ul {
  transform: translateX(-27.5em);
}

等等。

<<和>>的鏈接不起作用，特別是后者將變得有些棘手（並且可能無法實現，如果您事先不知道該頁面有多少頁。

通常，要使此功能完全起作用，將有很多硬編碼內容。

根據要求，這是我能想到的使用最少JS的解決方案，但老實說，如果您仍然將JS用於點擊處理程序（並且必須這樣做，因為沒有它就無法完成），它最好在javascript中實現一些計算和完整性檢查，而不是尋找幾乎僅CSS的解決方案。