如何获取Web动画当前施加于元素的专属样式属性？

需求明确：精准获取动画作用元素的仅由动画产生的样式属性值，排除元素固有样式（如padding）或非动画设置的样式（如手动添加的color:blue），支持动画任意阶段暂停、设置iterationStart等场景，且不能修改原元素。

以下是两种可行的实现方案：

方案一：临时空白元素 + KeyframeEffect目标替换 #

利用Web Animations API的commitStyles()方法，将动画当前状态提交到一个临时空白元素上，从而提取仅动画产生的样式，完全不影响原元素。

实现代码 #

function getAnimationOnlyStyles(animation) {
  const originalTarget = animation.effect.target;
  // 创建临时空白元素
  const tempEl = document.createElement('div');
  // 临时替换动画目标为临时元素
  animation.effect.target = tempEl;
  // 将动画当前状态提交到临时元素的style属性
  animation.commitStyles();
  
  // 提取动画涉及的所有属性
  const animatedProps = new Set();
  animation.effect.getKeyframes().forEach(frame => {
    Object.keys(frame).forEach(prop => {
      // 排除关键帧的控制属性（offset/easing/composite）
      if (!['offset', 'easing', 'composite'].includes(prop)) {
        animatedProps.add(prop);
      }
    });
  });
  
  // 收集临时元素上的动画样式值
  const result = {};
  animatedProps.forEach(prop => {
    result[prop] = tempEl.style[prop];
  });
  
  // 恢复原动画目标并清理临时元素
  animation.effect.target = originalTarget;
  tempEl.remove();
  
  return result;
}

// 示例：暂停动画时获取样式
pauseButton.addEventListener("click", () => {
  animation.pause();
  const animStyles = getAnimationOnlyStyles(animation);
  console.log('当前动画样式:', animStyles);
  
  // 解析transform中的rotate和scale子属性
  const transformStr = animStyles.transform;
  const rotate = transformStr.match(/rotate\(([^)]+)\)/)?.[1] || 'N/A';
  const scale = transformStr.match(/scale\(([^)]+)\)/)?.[1] || 'N/A';
  console.log('rotate:', rotate, 'scale:', scale);
});

方案优势 #

• 完全不修改原元素的任何属性或样式
• 能准确捕捉动画任意阶段的状态（包括iterationStart偏移、中途暂停等场景）
• 直接从临时元素的style中提取值，无需过滤大量无关样式

方案二：基线样式与当前计算样式对比 #

提前记录元素动画启动前的基线样式，通过对比当前计算样式，筛选出仅由动画带来的变化。

实现代码 #

// 提前记录动画启动前的基线样式（需在动画播放前执行）
const baselineStyles = {};
// 先提取动画涉及的属性
const animatedProps = new Set();
newspaperKeyFrames.getKeyframes().forEach(frame => {
  Object.keys(frame).forEach(prop => {
    if (!['offset', 'easing', 'composite'].includes(prop)) {
      animatedProps.add(prop);
    }
  });
});
// 记录基线值
animatedProps.forEach(prop => {
  baselineStyles[prop] = getComputedStyle(newspaper)[prop];
});

function getAnimatedStyleChanges(animation, baseline) {
  const currentStyle = getComputedStyle(animation.effect.target);
  const changes = {};
  
  animatedProps.forEach(prop => {
    // 对比基线值与当前值，差异即为动画带来的变化
    if (currentStyle[prop] !== baseline[prop]) {
      changes[prop] = currentStyle[prop];
    }
  });
  
  return changes;
}

// 示例：暂停动画时获取样式变化
pauseButton.addEventListener("click", () => {
  animation.pause();
  const animChanges = getAnimatedStyleChanges(animation, baselineStyles);
  console.log('动画带来的样式变化:', animChanges);
});

方案优势 #

• 无需创建额外元素，逻辑更轻量
• 能直接获取计算后的最终样式值（比如transform的具体矩阵值，若需要的话）

注意事项 #

• 必须在动画启动前记录基线样式，否则会包含已有的动画变化
• 若元素在动画启动前有其他样式修改，需确保基线记录的是动画启动前的最终状态

多动画场景处理 #

如果同一元素绑定了多个动画，只需遍历所有动画实例，收集所有动画涉及的属性，再合并结果即可。例如：

function getAllAnimatedStyles(animations) {
  const allStyles = {};
  animations.forEach(anim => {
    const animStyles = getAnimationOnlyStyles(anim);
    Object.assign(allStyles, animStyles);
  });
  return allStyles;
}

补充说明 #

目前Web Animations API并未提供直接获取“仅动画样式”的原生方法，上述两种方案是当前最可行的替代实现。

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