CSS收起標志上下抖動問題的解決方法

.expander {
transition: all .2s ease-in-out; /*添加CSS過渡*/
-webkit-transition: all .2s ease-in-out;
}
.expander:focus {
outline: none; /*刪除默認輪廓線*/
}
.expander::before {
content: "▲"; /*默認顯示向上的箭頭*/
display: inline-block;
margin-right: 5px;
transform-origin: 50% 40%; /*指定變形基點*/
transition: transform .2s ease-in-out; /*添加CSS過渡*/
-webkit-transition: transform .2s ease-in-out;
}
.expander.collapsed::before {
content: "▼"; /*箭頭向下*/
transform: rotate(180deg); /*將箭頭旋轉180度*/
}

當我們使用CSS中的“收起標志”時，可能會遇到一個令人困擾的問題：當我們切換（注冊）標志的狀態(tài)時，箭頭會上下抖動一下（在替換箭頭內(nèi)容的短時間內(nèi)）。這在用戶體驗上顯然不太好，所以我們需要解決這個問題。

解決這個問題的方法是使用CSS過渡，這樣我們可以在箭頭切換時動畫過渡，從而使過渡更平滑地進行。

在上面的代碼中，我們需要在CSS類“expander”上添加過渡。這將允許我們使用CSS屬性相應地改變箭頭的位置。我們還需要在CSS類“expander:focus”中刪除默認輪廓線，因為這對用戶體驗來說是一個小問題。

為了使箭頭更加穩(wěn)定，我們使用了“transform-origin”屬性指定了箭頭的變換基點，并將過渡效果添加到了類別“.expander”和“.expander.collapsed::before”中。

最后，通過在類“.expander.collapsed::before”中將箭頭的旋轉角度設置為180度，我們可以使箭頭在替換內(nèi)容時更加平滑。