时间戳

首页 > 解决方案 > 在 CSS 转换结束后设置输入插入符号焦点

jquery - 在 CSS 转换结束后设置输入插入符号焦点

问题描述

我正在尝试创建搜索输入效果，我需要延迟触发焦点，因为我需要输入来等待搜索图标 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

我希望我的结果接近这个​​： 输入效果

标签： jqueryinputfocus

解决方案

我使用 CSS 而不是 JS 实现了这一点：

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

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

推荐阅读