animation - 覆盖网页动画api设置的样式

Question

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

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

Answer 1

CSS Animations 和 Web Animations API 设置的样式会影响 CSS 级联的动画级别。规范的组合效果部分对此进行了描述。因此，如果您在样式表或样式属性中设置样式，除非该样式为 ，否则!important动画样式将覆盖它。

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

1. 当您想用其他东西替换“填充”样式时，请cancel()在更新样式的同时调用动画。
2. 使用翻转动画。ie 将目标样式设置为您想要的特定高度。使您的动画在相同的高度完成，并且不要使用前向填充模式。在接下来的几个月里，Firefox/Chrome/polyfill 应该会发布一个更新，通过不需要您指定动画的端点来使这部分更容易。

Answer 2

所以我在网上看了一篇文章，我不记得我在哪里找到的。但它声明 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();
    });
  }

样式目标对象只是一个格式化了您的网络动画对象的对象：

{    
    height: 'auto'
}

它现在似乎有效。