Установить фокус ввода ввода после завершения CSS-переходов

Question

Я пытаюсь создать эффект ввода для поиска, и мне нужно активировать фокус с задержкой, потому что мне нужен ввод, чтобы дождаться завершения поиска значка поиска CSS.

Я пытался использовать функции .delay() и setTimeout, но фокус не ждет или не работает вообще.Я также искал решения, но ни одно из них даже близко не соответствует тому, чего я хочу достичь.

$('.input').bind('focus', function() { $(this).blur(); $('.search-icon').addClass('active').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ $('.input').focus(); }); });

Это мой основной код jQuery, а вот Codepen: https://codepen.io/chakachuk/pen/BvZRmB

Я ожидаю, что мой результат будет примерно таким:

Answer 1

Я добился этого с помощью CSS, а не JS:

$('.input').bind('focus', function() {
  $(this).css('color', 'transparent');
  $('.search-icon').addClass('active').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    $('.input').css('color', '#fff');
  });
});

Я просто скрываю курсор ввода прозрачным цветом до конца переходов