Не работает focus() с transition

Question

Допустим у меня есть такой код. Почему focus не работает когда есть transition: all ... ; ?

Еще я заметил что это конкретно с visibility такое, если в transition указать всё кроме visibility, то работать будет, но всё же почему так

let input = document.querySelector('#input');
let focus = document.querySelector('#focus');
let blur  = document.querySelector('#blur');

focus.addEventListener('click', function() {
    input.classList.add('_active');
    input.focus();
});

blur.addEventListener('click', function() {
    input.classList.remove('_active');
    input.blur();
});

#input {
    visibility: hidden;
    transition: .5s ease-in;
}

#input._active {
  visibility: visible;
}

<form>
    <input value="text" id="input">
    <input type="button" value="focus" id="focus">
    <input type="button" value="blur"  id="blur">
</form>

Answer 1

visibility - указывает видимость элемента, в данном случае вы используете hidden, а он судя по документации, не даёт элементу получить фокус, на элемент хоть и можно нажимать, но фокуса он больше не получит. Если вы хотите сделать плавное исчезание и сохранить фокус, то тогда указывайте opacity и в пропорцию transition добавьте opacity чтобы плавность только применялась на эту пропорцию и не вызывала лишних нагрузок.

let input = document.querySelector('#input');
let focus = document.querySelector('#focus');
let blur  = document.querySelector('#blur');

focus.addEventListener('click', function() {
    input.classList.add('_active');
    input.focus();
});

blur.addEventListener('click', function() {
    input.classList.remove('_active');
    input.blur();
});

#input {
  opacity: 0;
  transition: .5s ease-in opacity;
}

#input._active {
  opacity: 1;
}

<form>
    <input value="text" id="input">
    <input type="button" value="focus" id="focus">
    <input type="button" value="blur"  id="blur">
</form>

БЛОГ НА HUSL

Не работает focus() с transition

Ответы (1 шт):