在JavaScript中高效控制CSS动画：实现可重复触发的移动端提示

<button class="copy-button" onclick="copyCupom()">复制优惠码</button>
<div class="alert-coupon">
  优惠码已复制！
</div>

/* 提示信息的默认隐藏状态 */
.alert-coupon {
    opacity: 0;
    visibility: hidden; /* 确保元素不占用空间或不响应事件 */
    transition: opacity 0.3s ease-in-out; /* 可选的淡入效果 */
    position: fixed; /* 或 absolute，根据布局调整 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
}

/* 提示信息的显示状态 */
.alert-coupon.show {
    opacity: 1;
    visibility: visible;
}

/* 隐藏动画的CSS类 */
.alert-coupon.hide-animation {
    animation: hideText 1s ease-in forwards;
    -webkit-animation: hideText 1s ease-in forwards; /* 移动端兼容 */
}

/* 定义关键帧动画 */
@keyframes hideText {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@-webkit-keyframes hideText { /* 移动端兼容 */
  to {
    opacity: 0;
    visibility: hidden;
  }
}

function copyCupom() {
  // 1. 复制文本到剪贴板
  var copyText = document.querySelector(".offer-right__coupon input");
  if (!copyText) { // 确保元素存在
    console.error("未找到优惠码输入框。");
    return;
  }
  copyText.select();
  copyText.setSelectionRange(0, 99999); // 兼容移动设备
  navigator.clipboard.writeText(copyText.value)
    .then(() => {
      console.log("文本已成功复制到剪贴板。");
      showAlert(); // 复制成功后显示提示
    })
    .catch(err => {
      console.error("复制文本失败: ", err);
      // 可以在此处添加一个失败提示
    });
}

function showAlert() {
  var textWasCopied = document.querySelector(".alert-coupon");
  if (!textWasCopied) {
    console.error("未找到提示信息元素。");
    return;
  }

  // 确保重置动画状态，以便动画可以重新播放
  textWasCopied.classList.remove('hide-animation'); // 移除隐藏动画类
  textWasCopied.style.opacity = '0'; // 确保透明度为0
  textWasCopied.style.visibility = 'hidden'; // 确保元素隐藏

  // 强制浏览器重绘（reflow），以确保动画能够重新触发
  // 这一步对于某些浏览器和特定场景可能很重要
  void textWasCopied.offsetWidth;

  // 1. 显示提示信息
  textWasCopied.classList.add('show');

  // 2. 延迟一段时间后触发隐藏动画
  setTimeout(() => {
    textWasCopied.classList.add('hide-animation');
  }, 2000); // 2秒后开始隐藏动画

  // 3. 监听动画结束事件，以便重置元素状态
  // 使用 once: true 确保事件监听器只执行一次
  textWasCopied.addEventListener('animationend', function handler() {
    textWasCopied.classList.remove('show'); // 移除显示类
    textWasCopied.classList.remove('hide-animation'); // 移除隐藏动画类
    textWasCopied.style.opacity = '0'; // 确保动画结束后完全透明
    textWasCopied.style.visibility = 'hidden'; // 确保动画结束后隐藏
    textWasCopied.removeEventListener('animationend', handler); // 移除监听器
  }, { once: true });

  // 兼容 -webkit-animationend
  textWasCopied.addEventListener('webkitAnimationEnd', function handler() {
    textWasCopied.classList.remove('show');
    textWasCopied.classList.remove('hide-animation');
    textWasCopied.style.opacity = '0';
    textWasCopied.style.visibility = 'hidden';
    textWasCopied.removeEventListener('webkitAnimationEnd', handler);
  }, { once: true });
}