当我为 textarea
设置过渡并想通过右下角的调整大小 handle 调整其大小时,调整大小会出现延迟。
您可以在这个简单的示例中看到这一点:
textarea{
outline : none;
border: 3px solid black;
resize: vertical;
-webkit-transition:all ease-in-out 0.7s;
-moz-transition:all ease-in-out 0.7s;
-ms-transition:all ease-in-out 0.7s;
-o-transition:all ease-in-out 0.7s;
transition:all ease-in-out 0.7s;
}
textarea:focus{
border-color: red;
}
<textarea>Resize me by my resize handle please</textarea>
如果没有过渡,调整大小很平滑,但我想为边框颜色更改提供过渡。
我考虑过不在 textarea
上使用过渡,而是使用动画,如下所示:
textarea{
outline : none;
border: 3px solid black;
resize: vertical;
}
textarea:focus{
animation: animate 0.7s linear forwards;
}
@keyframes animate {
100% {
border-color: red;
}
}
<textarea>Resize me by my resize handle please</textarea>
如您所见,我部分地解决了动画问题,但在焦点上我没有过渡。
请提供纯 CSS 的解决方案。如果我可以在不使用动画的情况下解决滞后问题,或者使用动画焦点来解决它,但我不知道如何选择焦点。
最佳答案
问题是您将过渡应用于所有属性,并且在调整大小时您正在更改元素的高度/宽度,以便它们受到过渡的影响;因此你就会产生这种滞后效应。
要避免这种情况,只需将过渡应用于所需的属性,在本例中为border-color
。
textarea {
outline: none;
border: 3px solid black;
resize: vertical;
transition: border-color ease-in-out 0.7s;
}
textarea:focus {
border-color: red;
}
<textarea>Resize me by my resize handle please</textarea>
关于动画问题:当焦点被移除时,动画也会被移除,因此您会立即返回到初始状态。要解决此问题,您可以考虑使用两个动画。
这只是第二种方法的修复,而不是我推荐的解决方案,因为上面的方法是合适的。
textarea {
outline: none;
border: 3px solid black;
resize: vertical;
animation: focus-out 0.7s linear forwards;
}
textarea:focus {
animation: focus-in 0.7s linear forwards;
}
@keyframes focus-out {
from {
border-color: red;
}
to {
border-color: black;
}
}
@keyframes focus-in {
to {
border-color: red;
}
}
<textarea>Resize me by my resize handle please</textarea>
关于html - 通过过渡调整文本区域大小是滞后的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49711881/