在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');
  });
});

我只是用透明颜色隐藏输入插入符号，直到过渡结束