如何实现全局CSS Transform开关按钮？求非jQuery解决方案

我明白你折腾一整天的感受——有时候看似简单的切换功能，偏偏卡壳了😅。你之前直接给所有元素设置transform: none的问题在于：你没有保存元素原本的transform状态，所以没法恢复。更高效的做法是用CSS类来控制全局动画的开关，下面是具体方案：

核心思路 #

通过给根元素（html或body）添加/移除一个全局类，来批量控制所有元素的transform样式。这种方式比遍历所有元素修改CSS性能更好，也更容易实现切换逻辑。

方案1：无需jQuery的原生JS实现（推荐） #

步骤1：添加全局CSS样式 #

在你的主题样式表或者Divi的自定义CSS中加入这段代码：

/* 全局禁用动画的类 */
.disable-animations * {
  transform: none !important;
}

!important是为了确保这个样式能覆盖Divi自带的滚动动画样式（因为Divi可能会给元素加内联或高优先级的transform）。

步骤2：修改按钮和JS逻辑 #

替换你原来的按钮和脚本为以下内容：

<div id="toggleAnimations" style="color:#fff; background:#333; padding:8px 16px; cursor:pointer;"> Turn Off Animations </div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮元素
  const toggleBtn = document.getElementById('toggleAnimations');
  // 记录当前动画状态：false=开启，true=禁用
  let animationsDisabled = false;

  // 绑定点击事件
  toggleBtn.addEventListener('click', function() {
    // 切换状态
    animationsDisabled = !animationsDisabled;
    // 给html元素切换禁用类
    document.documentElement.classList.toggle('disable-animations', animationsDisabled);
    // 更新按钮文字
    this.textContent = animationsDisabled ? 'Turn On Animations' : 'Turn Off Animations';
  });
});
</script>

方案2：jQuery版本（如果你仍需要依赖jQuery） #

如果你习惯用jQuery，也可以用这个版本：

步骤1：同样添加上面的全局CSS样式 #

步骤2：修改按钮和脚本 #

<div id="toggleAnimations" style="color:#fff; background:#333; padding:8px 16px; cursor:pointer;"> Turn Off Animations </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  const $toggleBtn = $("#toggleAnimations");
  let animationsDisabled = false;

  $toggleBtn.click(function(){
    animationsDisabled = !animationsDisabled;
    // 给html元素切换禁用类
    $('html').toggleClass('disable-animations', animationsDisabled);
    // 更新按钮文字
    $(this).text(animationsDisabled ? 'Turn On Animations' : 'Turn Off Animations');
  });
});
</script>

为什么这个方法可行？ #

1. 可恢复性：移除.disable-animations类后，所有元素会自动恢复原来的transform样式，不需要手动保存每个元素的初始状态。
2. 性能更优：类切换是浏览器原生支持的高效操作，比遍历所有DOM元素修改CSS属性快得多。
3. 扩展性强：如果之后需要禁用其他动画属性（比如transition、animation），只需要在.disable-animations *里添加对应的样式即可，比如：

.disable-animations * {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

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