WordPress网站JS按钮Spinner加载动画失效问题求助

我编写了一套实现按钮加载Spinner动画的HTML-CSS-JS代码，在普通测试环境中点击按钮后动画正常运行，但在WordPress页面中，JS代码已执行（控制台能输出日志），却无法触发动画效果。即使停用所有插件换其他站点测试，问题依然存在。

源代码 #

HTML #

<body>
  <center>
    <button type="button" class="button-motion">
      <span class="button__text">Boka</span>
    </button>
  </center>
</body>

CSS #

.button-motion {
    width: 80px;
    text-align: center;
    position: relative;
    padding: 5px 20px;
    background: #ffffff !important;
    border: 1;
    outline: none;
    border-width: thin !important;
    border-color: #ddc8a8 !important;
    border-radius: 5px;
    cursor: pointer;
}
.button-motion:hover {
    background: #ffffff !important;
}
.button-motion:active {
    background: #ffffff !important;
}
.button__text {
    font: 13px "arial", sans;
    color: #ad7d4e;
    transition: all 0s;
    background: #ffffff !important;
}
.button--loading .button__text {
    background: #ffffff !important;
    visibility: hidden;
    opacity: 0;
}
.button--loading::after {
    content: "";
    background: #ffffff !important;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 1.5px solid transparent;
    border-top-color: #ad7d4e;
    border-radius: 70%;
    animation: button-loading-spinner 1s linear infinite;
}
@keyframes button-loading-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

原JS代码 #

const theButton = document.querySelector(".button-motion");
theButton.addEventListener("click", () => {
  theButton.classList.add("button--loading");
});

排查与解决方法 #

1. 检查CSS优先级冲突 #

WordPress主题自带的样式可能通过更高特异性的选择器覆盖了自定义样式，即使使用!important也可能失效：

• 打开浏览器开发者工具，选中按钮元素，查看.button--loading::after和.button--loading .button__text的样式是否被划掉（表示被覆盖）
• 优化选择器特异性，比如将.button--loading改为更具体的div.wp-block-button .button-motion.button--loading（根据按钮实际所在区块调整）
• 减少!important的使用，改用精准选择器提升优先级

2. 确保JS在DOM加载完成后执行 #

WordPress的脚本加载顺序可能导致JS在按钮元素渲染前执行，虽然控制台有日志，但可能是后续重新执行的。修改JS为DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
  const theButton = document.querySelector(".button-motion");
  if (theButton) {
    theButton.addEventListener("click", () => {
      theButton.classList.add("button--loading");
      // 可添加日志确认class是否成功添加：console.log('Class added:', theButton.classList);
    });
  }
});

3. 验证按钮DOM结构是否被修改 #

部分WordPress主题或区块编辑器会自动修改按钮HTML结构（比如外层添加div、修改class）：

• 用开发者工具查看页面实际渲染的按钮代码，确认.button-motion类存在，且button__text span仍在按钮内部
• 若结构变更，调整JS选择器或CSS规则适配新结构

4. 检查动画属性是否被禁用 #

少数主题会全局禁用animation属性或修改@keyframes作用域：

• 手动给按钮添加.button--loading类，查看是否显示Spinner
• 若手动添加后生效，说明JS添加class的逻辑有问题；若仍不生效，需调整CSS动画规则的优先级

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