如何以用户身份禁用Angular 17应用中的所有动画？

我之前做RPA自动化时也碰到过Angular动画搞事情的情况，确实头疼！既然没法改源码，只能靠自定义JS来搞定，给你几个实用的方案：

方案一：拦截元素样式设置（最可靠） #

Angular会直接往元素的style属性里写带!important的动画样式，普通全局样式根本顶不住。我们可以重写HTMLElement的setProperty方法，从根源上拦截所有动画/过渡属性的设置：

// 先保存原始方法，避免破坏其他功能
const originalSetProperty = HTMLElement.prototype.style.setProperty;

// 重写方法，过滤动画相关属性
HTMLElement.prototype.style.setProperty = function(propertyName, value, priority) {
  // 列出所有要拦截的动画/过渡属性
  const blockedProps = [
    'animation', 'animation-name', 'animation-duration', 'animation-timing-function',
    'animation-delay', 'animation-iteration-count', 'animation-direction',
    'animation-fill-mode', 'animation-play-state',
    'transition', 'transition-property', 'transition-duration',
    'transition-timing-function', 'transition-delay'
  ];
  
  // 仅允许设置非动画属性
  if (!blockedProps.includes(propertyName.toLowerCase())) {
    originalSetProperty.call(this, propertyName, value, priority);
  }
};

不管Angular怎么强制设置动画样式，这个方法都能直接拦截，完全阻断动画生效的可能。

方案二：清除现有动画+监听新元素 #

如果担心拦截方法有兼容性问题，可以先清除页面已有的动画样式，再用MutationObserver监听动态添加的元素，实时清除它们的动画：

// 单个元素清除动画/过渡样式的工具方法
function stripAnimations(element) {
  const style = element.style;
  // 批量清除所有动画相关属性
  ['animation', 'transition'].forEach(baseProp => {
    style.removeProperty(baseProp);
    style.removeProperty(`${baseProp}-name`);
    style.removeProperty(`${baseProp}-duration`);
    style.removeProperty(`${baseProp}-timing-function`);
    style.removeProperty(`${baseProp}-delay`);
    style.removeProperty(`${baseProp}-iteration-count`);
    style.removeProperty(`${baseProp}-direction`);
    style.removeProperty(`${baseProp}-fill-mode`);
    style.removeProperty(`${baseProp}-play-state`);
  });
}

// 处理页面上已有的所有元素
document.querySelectorAll('*').forEach(stripAnimations);

// 监听页面新增元素，实时清除动画
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node instanceof HTMLElement) {
        stripAnimations(node);
        // 别忘了处理子元素
        node.querySelectorAll('*').forEach(stripAnimations);
      }
    });
  });
});

// 启动监听，覆盖整个body的子元素变化
observer.observe(document.body, { childList: true, subtree: true });

这个方案能处理动态加载的内容，但如果Angular后续又重新设置了动画样式，还是会生效，所以最好和方案一结合使用。

方案三：禁用Angular的动画驱动（看情况使用） #

如果Angular的全局对象没有被混淆压缩，还可以直接替换它的动画驱动为“无操作”版本，从框架层面禁用所有动画：

// 尝试获取Angular核心模块
const ngCore = window.ng?.core;
if (ngCore) {
  try {
    // 获取应用注入器，替换AnimationDriver为无操作版本
    const injector = ngCore.injector.get(ngCore.Injector);
    injector.provide(ngCore.AnimationDriver, { useClass: ngCore.NoopAnimationDriver });
  } catch (err) {
    console.warn('无法替换Angular动画驱动：', err);
  }
}

这个方法最彻底，但缺点是很多生产环境的Angular应用会混淆全局对象，导致window.ng不可用，所以适用性有限。

推荐组合 #

建议你先运行方案一的代码，再运行方案二的代码，这样既从根源阻止动画设置，又能清除页面上已有的动画效果，应对各种情况都比较稳。

备注：内容来源于stack exchange，提问作者Falco