Изменение размера текстового поля с переходом тормозит
Когда я установил переход для textarea и хочу изменить его размер с помощью ручки изменения размера в правом нижнем углу, изменение размера запаздывает.
Вы можете увидеть это на этом простом примере:
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. Если я могу решить проблему с задержкой без использования анимации или решить ее с отключением фокуса анимации, я не знаю, как выбрать отключение фокуса.
Ответы 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>