如何检测transition动画何时结束？现有代码触发无限重复提示

我用了一个带展开动画的搜索框代码，想在动画结束时判断输入框是否有值，但绑定的transitionend事件导致alert("No value")无限重复弹出，相关代码如下：

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-box">
  <button class="btn-search"><i class="fas fa-search"></i></button>
  <input id="my_search" type="text" class="input-search" placeholder="Type to Search...">
</div>

原JS代码 #

$('#my_search').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
  if (e.target === e.currentTarget) {
    if ($(this).val()) {
      alert("Contains a value");
    } else {
      alert("No value");
    }
  }
});

问题原因 #

1. transitionend事件会针对每个完成过渡的CSS属性触发一次，如果搜索框元素同时有多个过渡属性（比如宽度、内边距、边框样式等），就会多次触发该事件。
2. alert弹窗会阻塞浏览器线程，关闭弹窗后可能因元素状态变化再次触发过渡动画，形成无限循环。

修复方案 #

方案1：监听指定过渡属性 #

通过e.propertyName判断只监听目标过渡属性（比如搜索框展开/收起的核心属性width），避免无关属性触发事件：

$('#my_search').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
  // 只响应宽度属性的过渡结束事件，兼容webkit前缀
  const targetProperty = e.propertyName;
  if (e.target === e.currentTarget && (targetProperty === 'width' || targetProperty === '-webkit-width')) {
    $(this).val() ? console.log("输入框有值") : console.log("输入框无值");
  }
});

方案2：单次触发事件（适用于仅需监听一次动画的场景） #

如果只需要监听一次动画结束，可以用one()替代on()，事件触发后自动解绑：

$('#my_search').one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
  if (e.target === e.currentTarget) {
    $(this).val() ? console.log("输入框有值") : console.log("输入框无值");
  }
});

注意：建议用console.log替代alert，避免阻塞浏览器交互，也能更清晰地查看日志。

内容的提问来源于stack exchange，提问作者Lee A