当Javascript的.animate（）填充处于活动状态时，如何更改样式属性？

Question

我有一个突变观察者，它寻找某个元素的变化并在延迟后淡出内容。动画填充设置为“前进”，以使文本在淡出后保持隐藏状态。第一次像魅力一样工作，但是，下一次触发观察者时，opacity属性拒绝更改-确切地说，元素的不透明度实际上从未更改，但是我猜fill属性将感知的不透明度保持在0。

this.observer = new MutationObserver(function(mutations){
  mutations[0].target.style.opacity = 1;
  mutations[0].target.animate([
    {opacity: 1},
    {opacity: 0}
  ], {
    fill: 'forwards',
    duration: 1000,
    delay: 3000
  });
});

this.observer.observe(this.output, {childList: true});  // this.output is the observed element

总而言之，我希望代码片段在其他地方更改元素的innerHTML之后立即显示字符串，并在3秒钟后将其淡出。现在，第二次触发观察者时，该元素保持透明，仅在动画开始时出现，然后立即淡出。我很好奇我是否可以停止动画填充，但是我很乐意接受这个问题的任何解决方案（只要它是纯JavaScript，我知道这可以通过jQuery轻松解决，但是我希望此代码段具有可移植性尽可能）。