如何使用Bootstrap Icons与JS实现带动画的按钮图标切换及修复图标丢失问题

原实现的问题原因 #

当前代码最终图标缺失的核心逻辑偏差来自两点：

• jQuery的fadeOut()、delay()属于异步动画队列执行逻辑，但两处修改图标的attr()操作是同步立即执行的，完全不会等待动画流程走完，会出现图标切换顺序和预期不一致的问题
• 代码只定义了按钮的淡出动画，没有在图标状态切换完成后，把按钮重新淡入显示，等动画流程跑完按钮一直处于隐藏状态，视觉上就会呈现为图标丢失的效果

原有匹配的HTML结构不需要做调整，仅修正JS的执行逻辑即可实现预期的图标切换+动画效果。

修正后的可运行实现 #

核心JS逻辑 #

把所有状态切换的操作，放到对应动画的回调函数里串行执行，避免同步操作打乱动画顺序，同时加入防连续点击判断，避免动画队列堆叠导致逻辑混乱：

toClipboard: function (refElementName, sender) {
  // 动画执行中拦截重复点击
  if ($(sender).is(":animated")) return;

  let btn = $(sender);
  let btnIcon = btn.find("i");

  // 执行选中文本、复制的基础逻辑
  $(`[name='${refElementName}']`).select();
  document.execCommand("copy");

  // 串行串联全流程动画
  btn.fadeOut(300, function() {
    // 按钮淡出完成后，切换为成功状态的对勾图标
    btnIcon.attr("class", "bi bi-clipboard-check");
    // 重新淡入展示成功反馈
    btn.fadeIn(300);

    // 保持成功状态2秒后，切回初始复制图标
    setTimeout(() => {
      btn.fadeOut(300, function() {
        btnIcon.attr("class", "bi bi-clipboard");
        btn.fadeIn(300);
      })
    }, 2000)
  })
}

可选效果优化 #

• 给图标添加平滑过渡效果，让切换过程更自然，直接在全局CSS中添加规则即可：

  .btn > i {
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  

• 可以把已废弃的document.execCommand("copy")替换为现代Clipboard API，提升复制逻辑在不同浏览器下的稳定性。

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