如何用纯JavaScript实现按钮点击触发伪元素CSS关键帧动画

核心原理 #

伪元素不属于真实DOM节点，无法直接通过JS选中修改样式，所以我们通过给伪元素的父元素切换专属类名的方式，间接控制伪元素的动画生效时机，全程不需要第三方框架。

第一步：调整原有CSS代码 #

把原来直接写在.bottle:after上的动画属性移除（避免页面加载就自动播放），新增一个激活类的样式规则，只有父元素带上这个类时，伪元素才加载动画属性：

.bottle:after {
    z-index: -500;
    content: "";
    position: absolute;
    bottom: -95%;
    left: -60%;
    height: 130%;
    width: 240%;
    background: blue;
    border-radius: 45%;
    /* 移除原位置的animation属性，避免页面加载自动播放 */
}

/* 新增激活类：父元素带该类时，伪元素才触发动画 */
.bottle.start-spin:after {
    animation: spin 6s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes spin {
    0% {transform: translateY(0) rotate(0deg);}
    100% {transform: translateY(-50%) rotate(500deg);}
}

第二步：编写纯JS交互逻辑 #

给目标按钮绑定点击事件，点击时给.bottle元素加上定义好的激活类即可。如果需要支持重复点击每次都重新播放动画，加一段强制重排的逻辑即可：

// 替换成你实际业务里的选择器即可
const triggerBtn = document.querySelector('button'); // 动画触发按钮
const bottleEl = document.querySelector('.bottle');

triggerBtn.addEventListener('click', () => {
    // 已有动画类时先移除，支持重复点击重放
    if (bottleEl.classList.contains('start-spin')) {
        bottleEl.classList.remove('start-spin');
        // 强制浏览器重排，否则移除类后立即加类不会重启动画
        void bottleEl.offsetHeight;
    }
    // 添加激活类，触发动画
    bottleEl.classList.add('start-spin');
});

补充说明 #

• 如果只需要动画在第一次点击时播放一次、不需要重复触发，直接删掉判断重排的逻辑，点击时直接给元素加类即可。
• 不要尝试通过JS直接获取:after伪元素修改样式，这类操作兼容性差且不符合规范，类名切换是目前最稳定的实现方案。

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