借助 :has 實現(xiàn)3D輪播圖
這次帶來一個比較常見的案例，3d 輪播圖，就像這樣的：
這個輪播圖有幾個需要實現(xiàn)的點：
- 3d 視覺，也就是中間大，兩邊小。
- 自動輪播，鼠標放上自動暫停。
- 點擊任意卡片會立即跳轉(zhuǎn)到該卡片。
這次借助:has來實現(xiàn)這樣的功能，相信可以帶來不一樣的思路，一起看看吧！
溫馨提醒：兼容性要求需要 Chrome 101+，并且開始實驗特性（105+正式支持），Safari 15.4+，F(xiàn)irefox 官方說開啟實驗特性可以支持，但是實測并不支持。
一、3d 視覺樣式
這一部分才是重點。
首先我們來簡單布局一下，假設HTML是這樣的：
<div class="view" id="view">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item current">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
為了盡可能減少復雜度，我們可以將所有的變化都集中在一個類名上。
比如.current?表示當前選中項，也就是中間的那項。這里采用絕對定位的方式，將所有卡片項都堆疊在一起，然后設置3d?視圖，將卡片的Z?軸往后移動一段距離，讓.current在所有卡片的最前面，實現(xiàn)近大遠小的效果，具體實現(xiàn)如下：
.view {
position: relative;
width: 400px;
height: 250px;
transform-style: preserve-3d;
perspective: 500px;
}
.item {
position: absolute;
width: 100%;
height: 100%;
border-radius: 8px;
display: grid;
place-content: center;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
transform: translate3d(0, 0, -100px);
}
.item.current {
transform: translate3d(0, 0, 0);
}
效果如下：
其實層級是這樣的，可以在 Chrome 圖層中看到：
現(xiàn)在，我們需要讓相鄰左右兩邊的都漏出來，右邊的比較容易，用相鄰兄弟選擇器??+??就可以了
.item.current + .item{
transform: translate3d(30%, 0, -100px);
}
那相鄰左邊的呢？以前是無解的，只能通過 JS 分別設置不同的類名，非常麻煩，但現(xiàn)在有了??:has??偽類，也可以輕松實現(xiàn)了，如下
.item:has(+.item.current){
transform: translate3d(-30%, 0, -100px);
}
效果如下：
不過還有一些臨界情況，比如在第一個卡片時，由于前面沒有兄弟節(jié)點了，所以就成了這樣。
所以需要再在第一個元素時，把最后一個元素放在它的左邊，第一個元素是:first-child?，最后一個元素是:last-child，所以實現(xiàn)是這樣的（最后一個元素處理同理）。
.item.current:first-child ~ .item:last-child {
transform: translate3d(-30%, 0, -100px);
opacity: 1;
}
.item:first-child:has(~ .item.current:last-child) {
transform: translate3d(30%, 0, -100px);
opacity: 1;
}
這樣就處理好了邊界情況。
進一步，還可以向兩側(cè)露出兩個卡片，實現(xiàn)也是類似的，完整實現(xiàn)如下：
/*當前項*/
.item.current {
transform: translate3d(0, 0, 0);
}
/*當前項右1*/
.item.current + .item,
.item:first-child:has(~ .item.current:last-child) {
transform: translate3d(30%, 0, -100px);
}
/*當前項左1*/
.item:has(+ .item.current),
.item.current:first-child ~ .item:last-child {
transform: translate3d(-30%, 0, -100px);
}
/*當前項右2*/
.item.current + .item + .item,
.item:first-child:has(~ .item.current:nth-last-child(2)),
.item:nth-child(2):has(~ .item.current:last-child) {
transform: translate3d(50%, 0, -150px);
}
/*當前項左2*/
.item:has(+.item + .item.current),
.item.current:first-child ~ .item:nth-last-child(2),
.item.current:nth-child(2) ~ .item:last-child{
transform: translate3d(-50%, 0, -150px);
}
這樣就實現(xiàn)了關于.current的全部樣式處理了，只用一個變量就控制了所有變化。
二、自動輪播和暫停
有了上面的處理，接下來的邏輯就非常簡單了，只需要通過js動態(tài)控制.current的變化就行了。
一般情況下，我們可能會想到用定時器setInterval，但這里，我們也可以不使用定時器，借助 CSS 動畫的力量，可以更輕松地完整這樣的交互。
要做的事情很簡單，給容器添加一個無關緊要的 CSS 動畫。
.view {
/**/
animation: scroll 3s infinite;
}
@keyframes scroll {
to {
transform: translateZ(.1px); /*無關緊要的動畫樣式*/
}
}
這樣就得到了一個時長為3s，無限循環(huán)的動畫了。
然后，監(jiān)聽animationiteration?事件，這個事件在動畫每次運行一次就會回調(diào)一次，在這里也就是每3s?運行一次，就像setInterval的功能一樣
GlobalEventHandlers.onanimationiteration - Web API 接口參考 | MDN (mozilla.org)[1]。
在animationiteration?回調(diào)中處理.current?邏輯，很簡單，移除當前的.current?，給下一個添加.current，注意一下邊界就行了，具體實現(xiàn)如下：
view.addEventListener("animationiteration", () => {
const current = view.querySelector(".current") || view.firstElementChild;
current.classList.remove("current");
if (current.nextElementSibling) {
current.nextElementSibling.classList.add("current");
} else {
view.firstElementChild.classList.add("current");
}
});
使用animationiteration的最大好處是，可以直接通過 CSS 進行動畫的控制，再也無需監(jiān)聽鼠標移入移出事件了。
.view:hover{
animation-play-state: paused;
}
效果如下（方便演示，速度調(diào)快了）。
三、點擊快速切換
點擊切換，我其實最先想到的是通過:checked，也就是類似單選，比如：
<div class="view" id="view">
<label class="item"><input type="radio" checked name="item"></label>
<label class="item"><input type="radio" name="item"></label>
<label class="item"><input type="radio" name="item"></label>
<label class="item"><input type="radio" name="item"></label>
<label class="item"><input type="radio" name="item"></label>
<label class="item"><input type="radio" name="item"></label>
</div>
但是目前來看??:has??偽類貌似不支持多層嵌套，比如下面這條語句。
.item:has(+.item:has(:checked)){
/*不生效*/
}
.item:has(:checked)選中的是子元素被選中的父級，然后.item:has(+.item:has(:checked))表示選中它的前面一個兄弟節(jié)點，這樣就能實現(xiàn)選中功能了，可惜現(xiàn)在并不支持??（以后可能支持）。
沒辦法，只能通過傳統(tǒng)方式來實現(xiàn)，直接綁定監(jiān)聽click事件。
view.addEventListener("click", (ev) => {
const current = view.querySelector(".current") || view.firstElementChild;
current.classList.remove("current");
ev.target.closest('.item').classList.add("current");
});
效果如下：
完整代碼可以查看線上 demo：CSS 3d scroll (codepen.io)[2]或者CSS 3dscroll(runjs.work)[3]。
四、總結一下
以上就是借助:has偽類來實現(xiàn)一個3d輪播圖的全部細節(jié)了，所有的視覺變化全部在 CSS 中完成，JS 只需要處理切換邏輯就行了，相比以前而言，實現(xiàn)上更加簡潔和優(yōu)雅，下面總結一下。
- 3d 視覺樣式可以通過transform-style: preserve-3d;實現(xiàn)近大遠小的效果。
- 通過.item:has(+.item.current)可以設置當前項前面的兄弟節(jié)點。
- 還需要考慮第一個和最后一個這兩種臨界情況。
- 輪播圖自動輪播和暫停可以借助animationiteration?回調(diào)，這種方式的優(yōu)勢是可以通過:hover控制。
- :has偽類貌似不支持多層嵌套，希望以后可以支持吧~
:has非常強大，目前唯一的缺陷在于兼容性。好在瀏覽器對于這一新特性跟進的都比較積極，明年這個時候差不多可以在內(nèi)部項目用起來了。
參考資料
?[1]GlobalEventHandlers.onanimationiteration - Web API 接口參考 | MDN (mozilla.org): https://developer.mozilla.org/zh-CN/docs/Web/API/Element/animationiteration_event。
[2]CSS 3d scroll (codepen.io): https://codepen.io/xboxyan/pen/PoeGjdg。
[3]CSS 3dscroll(runjs.work): https://runjs.work/projects/6a42a4c284e4442c。?
