如何实现点击按钮一次触发文本淡入淡出，且重复点击可重启动画？

问题背景 #

现有代码需要点击两次才能让「Added!」文本出现并淡出，需求改为：点击一次按钮就触发文本显示并自动淡出，且每次点击（即使文本正在淡出过程中）都能从完全可见状态重新开始淡出动画。

初始代码问题分析 #

1. 初始JS逻辑是切换display属性，第一次点击仅显示元素，但CSS动画早已加载，无法触发从头播放；第二次点击隐藏元素，完全不符合需求逻辑。
2. CSS关键帧中使用display属性无效，因为display是离散属性，无法通过CSS动画平滑过渡，应改用opacity控制透明度，配合visibility控制元素可见性与空间占据。

解决方案代码 #

修改后的HTML #

<button type='button' onclick="cartAdded()">Click me</button>
<p id='added-notification' class="added-notification">Added!</p>

修改后的CSS #

.added-notification {
    opacity: 0;
    visibility: hidden; /* 初始隐藏，不占据页面空间 */
    transition: opacity 0s; /* 用于快速重置透明度状态 */
}

.added-fade-out {
    opacity: 1;
    visibility: visible;
    animation: fadeOut 1s ease-out forwards; /* forwards保持动画结束后的状态 */
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

修改后的JavaScript #

function cartAdded() {
    const text = document.getElementById("added-notification");
    
    // 重置动画流程：先移除动画类，触发页面重排，再重新添加动画类
    text.classList.remove('added-fade-out');
    // 强制浏览器触发重排，确保动画能从头启动
    void text.offsetHeight;
    text.classList.add('added-fade-out');
}

代码说明 #

1. CSS优化：
   • 初始状态用opacity:0+visibility:hidden隐藏元素，visibility相比display:none更适配动画场景，支持参与CSS过渡/动画流程。
   • added-fade-out类触发淡出动画，forwards关键字让动画结束后保持最后一帧的隐藏状态。
2. JS逻辑：
   • 每次点击时，先移除动画类，再通过void text.offsetHeight强制浏览器刷新元素布局（触发重排），最后重新添加动画类，确保动画无论当前状态如何，都能从头开始播放。
   • 彻底抛弃初始的display切换逻辑，直接通过动画类控制元素的显示与淡出流程。

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