如何在WordPress博客页面禁用AOS动画效果

由于全站复用的内容块没法修改HTML移除data-aos="fade-up"属性，这里提供两种可行的解决方案：

一、CSS方案 #

直接通过页面专属的body类，覆盖博客页面内AOS动画的核心样式，让动画不生效：

/* 博客页面禁用AOS fade-up动画 */
.blog [data-aos="fade-up"],
.archive [data-aos="fade-up"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* 取消AOS初始隐藏状态 */
.blog .aos-init[data-aos][data-aos].aos-animate,
.archive .aos-init[data-aos][data-aos].aos-animate {
  opacity: 1 !important;
  transform: none !important;
}

注：WordPress博客页面的body标签默认会带.blog类，归档类博客页面可能带.archive类，如果你的页面类名不同，替换成对应类即可。这段CSS强制让目标元素保持可见，不执行任何过渡动画。

二、JS方案 #

方案1：按需初始化AOS #

只在非博客页面初始化AOS，博客页面直接移除动画属性或禁用AOS：

// 判断当前是否为博客页面
const isBlogPage = document.body.classList.contains('blog') || document.body.classList.contains('archive');

if (!isBlogPage) {
  // 非博客页面正常初始化AOS
  AOS.init({
    startEvent: 'load',
    once: false,
    disableMutationObserver: false, 
    duration: 500,
    easing: 'ease',
  });
  AOS.refresh(true);
} else {
  // 博客页面移除所有fade-up动画的属性
  document.querySelectorAll('[data-aos="fade-up"]').forEach(el => {
    el.removeAttribute('data-aos');
  });
  // 或者直接禁用整个AOS：AOS.disable();
}

方案2：通过AOS配置直接禁用 #

利用AOS自带的disable配置项，根据页面判断是否禁用：

AOS.init({
  startEvent: 'load',
  once: false,
  disableMutationObserver: false, 
  duration: 500,
  easing: 'ease',
  // 博客页面自动禁用AOS
  disable: document.body.classList.contains('blog') || document.body.classList.contains('archive')
});
AOS.refresh(true);

这个方案最简洁，直接在初始化时判断页面，博客页面下AOS会完全禁用，不会执行任何动画逻辑。

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