我有一個正在處理的切換欄元素，目前我可以正常作業以設定切換按鈕的樣式，但我想要更多影片。這個想法是讓當前的活動按鈕滑動到任何新激活的按鈕。所以從視覺上看，我唯一要添加到當前代碼中的是幻燈片影片。如何做到這一點正是我陷入困境的地方。現在活動元素不僅僅是獲得背景和一些樣式，還需要一個浮動/滑動框（我認為）
我不希望任何人為我實作它，但我在思考如何實作它時遇到了麻煩。我可以用偽元素做點什么嗎？我如何確保白色按鈕背景元素與它后面需要的單詞一樣寬？
這或多或少是一個通用的 CSS 問題，但我不確定如何開始這個程序。
如果有人對如何使這項作業有任何建議或技巧，或者只是指出我正確的方向，我將不勝感激！干杯!
這是我迄今為止在 CodeSandbox 中構建的內容
uj5u.com熱心網友回復：
您可以通過使用具有較低 z 索引的偽元素將背景顏色放在元素上，為白色塊“創建一個間隙”以使其在文本后面但在背景前面。
單擊按鈕時，您可以查看先前單擊的按鈕，并計算出白色塊必須移動多遠才能到達當前按鈕，以及它的寬度必須如何改變。
在這個片段中，“白塊”實際上是當前點擊按鈕上的一個偽元素。這樣可以輕松計算出它的最終放置位置，該位置位于當前單擊的按鈕正下方。
const buttons = document.querySelectorAll('button');
function clicked(e) {
const el = e.target;
const prevEl = document.querySelector('button.animate');
const x = (prevEl == null) ? '0%' : (prevEl.getBoundingClientRect().x - el.getBoundingClientRect().x) 'px';
const w2 = window.getComputedStyle(el).width;
const w1 = (prevEl == null) ? 0 : window.getComputedStyle(prevEl).width;
buttons.forEach(button => {
button.classList.remove('animate');
});
el.style.setProperty('--x', x);
el.style.setProperty('--w1', w1);
el.style.setProperty('--w2', '100%');
el.classList.add('animate');
}
buttons.forEach(button => {
button.addEventListener('click', clicked);
}
);nav {
display: inline-block;
position: relative;
}
nav::before {
content: '';
position: absolute;
background-color: gold;
width: 100%;
height: 100%;
left: 0 top: 0;
z-index: -3;
}
button {
margin: 2vmin;
background-color: transparent;
position: relative;
}
button::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: brown;
z-index: -2;
}
button.animate::after {
content: '';
position: absolute;
background-color: white;
width: 100%;
height: 100%;
animation-name: move;
animation-duration: 3s;
animation-fill-mode: forwards;
top: 0;
left: 0;
z-index: -1;
}
@keyframes move {
0% {
transform: translateX(var(--x));
width: var(--w1);
}
100% {
transform: translateX(0);
width: var(--w2);
}
}
@keyframes animate {
0% {}
100% {
background-color: white;
}
}<nav>
<button>AAAA</button>
<button>AA</button>
<button>AAAAAA</button>
<button>A</button>
</nav>uj5u.com熱心網友回復：
如果你想從頭開始，并且有能力控制白框相對于黃框的位置（位置：相對或絕對），你可以通過創建一個函式來硬編碼它，該函式采用所需的框坐標，檢查如果白框在正確的位置，并且如果沒有將其向正確的方向移動 x px，則在超時的情況下遞回呼叫自身。
本質上，每隔幾毫秒移動一點，直到它到達正確的位置。每 (1000/24) 毫秒或更短的時間移動一次應該使它看起來流暢。
至于大小，您可以對相同的想法進行硬編碼，也可以創建一個函式，根據給定的文本找到正確的大小。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/368238.html