css收起标志上下抖动

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中的“收起标志”时，可能会遇到一个令人困扰的问题：当我们切换（注册）标志的状态时，箭头会上下抖动一下（在替换箭头内容的短时间内）。这在用户体验上显然不太好，所以我们需要解决这个问题。

解决这个问题的方法是使用CSS过渡，这样我们可以在箭头切换时动画过渡，从而使过渡更平滑地进行。

在上面的代码中，我们需要在CSS类“expander”上添加过渡。这将允许我们使用CSS属性相应地改变箭头的位置。我们还需要在CSS类“expander:focus”中删除默认轮廓线，因为这对用户体验来说是一个小问题。

为了使箭头更加稳定，我们使用了“transform-origin”属性指定了箭头的变换基点，并将过渡效果添加到了类别“.expander”和“.expander.collapsed::before”中。

最后，通过在类“.expander.collapsed::before”中将箭头的旋转角度设置为180度，我们可以使箭头在替换内容时更加平滑。

上一篇：java随机更改窗口的宽度和高度

下一篇：java阻塞和挂起