Animation 替代web动画api设置的样式

我正在使用web动画api将div设置为特定高度的动画。我正在使用填充模式“向前”来保留高度后动画。但是，稍后我想通过CSS手动将高度设置回“自动”，但通过将填充模式设置为“向前”，似乎可以防止CSS在动画完成后影响高度属性，即使我在元素上设置了它

---

我无法在动画播放后立即将高度设置回“自动”，因此我想知道是否有方法覆盖填充“转发”设置的属性？

因此我在线阅读了一篇文章，我不记得在哪里找到它。但是它声明CSS不能覆盖填充模式样式

我最终创建了一个函数，该函数仅以0持续时间为属性设置动画

看起来是这样的：

  setWebAnimationApiStyles(nativeElement, styleTargets) {
    return new Promise((res, rej) => {
      const animation = nativeElement.animate([styleTargets, styleTargets], { duration: 0, delay: 0, fill: 'forwards' });
      animation.onfinish = (evt) => {
        res(animation);
      };
      animation.play();
    });
  }

style targets对象只是一个对象，其格式与web动画对象的格式相同：

{    
    height: 'auto'
}

---

CSS动画和Web动画API设置的样式会影响CSS级联的动画级别。规范的一节对此有描述。因此，如果在样式表或样式属性中设置样式，除非该样式是

！重要信息

，动画样式将覆盖它

在您的情况下，您有两个选择：

如果要用其他样式替换“填充”样式，请在更新样式的同时调用动画上的

cancel（）

使用翻转动画。i、 e.将目标样式设置为所需的特定高度。使动画在相同的高度完成，不要使用正向填充模式。在接下来的几个月里，Firefox/Chrome/polyfill应该会发布一个更新，通过不要求您指定动画的端点来简化这一部分

---

谢谢，我没有意识到cancel（）函数会撤消填充模式设置。我会尝试一下，如果可行，我会接受你的回答是，

cancel（）

会完全消除动画对目标元素的影响。