如何利用JavaScript和CSS类实现移动端动画并解决重复触发问题

<div class="offer-right__main">
    <div class="offer-right__coupon">
        <input type="text" value="PRIMEIRACOMPRA" readonly>
        <button onclick="copyCupom()">复制优惠码</button>
    </div>
    <div class="alert-coupon">已复制！</div>
</div>

/* 提示信息的初始状态：隐藏 */
.offer-right__main .alert-coupon {
    opacity: 0;
    visibility: hidden; /* 使用visibility确保元素不占用空间或不响应事件 */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* 平滑过渡显示/隐藏 */
    position: absolute; /* 根据实际布局调整定位 */
    /* 其他样式，如背景、字体颜色、padding等 */
    background-color: #4CAF50;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    z-index: 1000;
    /* 初始位置，例如居中 */
    left: 50%;
    transform: translateX(-50%);
    top: 50px; /* 距离顶部位置 */
}

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

/* 隐藏动画的关键帧 */
@keyframes hideText {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0); /* 动画开始时保持在原位 */
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px); /* 向上移动并淡出 */
    }
}

/* 触发隐藏动画的类 */
.offer-right__main .alert-coupon.hide-animation {
    animation: hideText 1s ease-out forwards; /* 动画持续1秒，结束后保持最终状态 */
}

/* 针对旧版WebKit浏览器（如iOS Safari）添加前缀 */
@-webkit-keyframes hideText {
    0% {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(-20px);
    }
}

.offer-right__main .alert-coupon.hide-animation {
    -webkit-animation: hideText 1s ease-out forwards;
}

function copyCupom() {
    // 1. 获取要复制的文本
    var copyText = document.querySelector(".offer-right__coupon input");
    copyText.select();
    copyText.setSelectionRange(0, 99999); // 针对移动设备

    // 2. 复制到剪贴板
    navigator.clipboard.writeText(copyText.value)
        .then(() => {
            // 3. 获取提示信息元素
            var textwascopied = document.querySelector(".offer-right__main .alert-coupon");

            // 4. 重置动画状态，确保动画可以重复触发
            // 移除所有动画相关的类和内联样式，回到初始隐藏状态
            textwascopied.classList.remove('show', 'hide-animation');
            textwascopied.style.opacity = '0'; // 强制重置opacity
            textwascopied.style.visibility = 'hidden'; // 强制重置visibility

            // 强制浏览器重绘（reflow），确保动画能够重新开始
            // 这是一个小技巧，通过访问元素的某个属性来强制浏览器计算布局
            void textwascopied.offsetWidth; 

            // 5. 显示提示信息
            textwascopied.classList.add('show');

            // 6. 在一段时间后触发隐藏动画
            // 使用setTimeout来控制显示时间，然后添加hide-animation类
            setTimeout(() => {
                textwascopied.classList.add('hide-animation');
            }, 1500); // 1.5秒后开始隐藏动画

            // 7. 监听动画结束事件，动画结束后彻底隐藏元素
            // 这确保了元素在动画结束后不占用空间，且opacity为0
            textwascopied.addEventListener('animationend', function handler() {
                textwascopied.classList.remove('show', 'hide-animation');
                textwascopied.style.opacity = '0';
                textwascopied.style.visibility = 'hidden';
                textwascopied.removeEventListener('animationend', handler); // 移除监听器，避免重复触发
            });

        })
        .catch(err => {
            console.error('复制失败:', err);
            // 可以显示一个错误提示
        });
}