Question

当我为textarea设置转换时，我想通过右下方的调整大小手柄调整大小，调整大小是滞后的。

你可以在这个简单的例子中看到：

＆＃13;

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;
}

＆＃13;

<textarea>Resize me by my resize handle please</textarea>

＆＃13;

没有过渡，调整大小是平滑的，但我希望转换边框颜色。

我想过不在textarea上使用转换，而是像这样使用动画：

＆＃13;

textarea{
  outline : none;
  border: 3px solid black;
  resize: vertical;
}

textarea:focus{
  animation: animate 0.7s linear forwards;
}

@keyframes animate { 
  100% {
    border-color: red;
  }
}

＆＃13;

<textarea>Resize me by my resize handle please</textarea>

＆＃13;

正如你所看到的，我部分解决了动画的问题，但是在焦点上我没有过渡。

请提供纯CSS解决方案。如果我可以在不使用动画的情况下解决滞后问题，或者通过动画聚焦来解决它，我不知道如何选择焦点。

Answer 1

问题在于您要将转换应用于所有属性，并且在调整大小时，您正在更改元素的高度/宽度，以便它们受到转换的影响;因此你有这种滞后效应。

为避免这种情况，只需将转换应用于所需的属性，在本例中为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>

通过转换调整textarea的大小是滞后的

1 个答案: