覆盖网络动画设置的样式 api

Question

我正在使用网络动画 api 将 div 动画化到特定高度。我正在使用填充模式 'forwards' 来保留高度 post 动画。但是，稍后我想通过 CSS 手动将高度设置回 'auto'，但是通过将填充模式设置为向前似乎可以防止 CSS 影响高度的能力属性动画结束后，即使我在元素上设置它。

我无法在动画播放后立即将高度设置回自动，所以我想知道是否有办法覆盖 fill 'forwards' 设置的属性？

Answer 1

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

现在看来还可以。

Answer 2

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

对于您的情况，您有两种选择：

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

覆盖网络动画设置的样式 api

override the styles set by web animation api

animation

web-animations