Question

我使用web动画api将div设置为特定高度的动画。我正在使用填充模式'前进'来保留动画后的高度。但是，稍后我想通过CSS手动将高度设置回'auto'，但是通过将填充模式设置为向前，似乎可以防止CSS在动画结束后影响height属性，即使我将其设置为on元素。

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

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部分中有对此的描述。因此，如果在样式表或样式属性中设置样式，除非该样式为public string Tree { get; set; }，否则动画样式将覆盖它。

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

如果您想用其他内容替换“填充”样式，请在更新样式的同时在动画上调用!important。
使用FLIP动画。即将目标样式设置为所需的特定高度。使动画完成相同的高度，不要使用前进填充模式。在未来几个月内，Firefox / Chrome / polyfill应该发布更新，以便通过不要求您指定动画的端点来简化此部分。

覆盖由web动画api

2 个答案: