Javascript FirefoxQuantum上的动画问题

我注意到新的Firefox Quantum上的动画有一个问题

当您第一次加载带有一些动画元素的页面时，

display:none，当脚本将其切换到
.display=“block”如果动画的长度超过几秒钟，您将错过整个动画，或动画开始时的某些部分

在下面的代码段中查看：


var anims=document.getElementsByClassName（“anim”），
时间=document.getElementById（“时间”），
间隔=空；
函数animate（）{
对于（变量i=0；i=0？sec--:clearInterval（interval）| |“”；
}, 1000);
}
//点击后直接
按钮0.addEventListener（“单击”，设置动画）；
//单击后一秒
按钮1.addEventListener（“单击”），函数（）{
定时器（1）；
设置超时（动画，1000）；
});
//单击后两秒
按钮2.addEventListener（“单击”），函数（）{
定时器（2）；
设置超时（动画，2000）；
});
//单击后三秒钟
按钮3.addEventListener（“单击”），函数（）{
定时器（3）；
设置超时（动画，3000）；
});
//藏起来
reset.addEventListener（“单击”），函数（）{
对于（变量i=0；i
正文{
字体系列：arial；
}
正文>div{
边缘底部：10px；
}
#结果{
背景色：#e5f3ff；
高度：120px；
填充：10px；
}
.阿尼姆{
显示：无；
浮动：左；
利润率：10px；
宽度：50px；
高度：50px；
边界半径：5px；
动画：动画1.5s；
}
#动漫1{
背景图像：线性梯度（120度，#a1c4fd 0%，#c2e9fb 100%）；
/*仅一次迭代（默认）*/
/*这一个将不会设置动画*/
}
#动漫2{
背景色：#fddb92；
动画迭代次数：3次；
/*三次迭代*/
/*只会看到一次迭代*/
}
#动漫3{
背景图像：线性梯度（45度，#ff9a9e 0%，#fad0c4 99%，#fad0c4 100%）；
动画迭代次数：无限；
/*无限的*/
/*没有明显的问题*/
}
@关键帧设置动画{
50% {
变换：平移（80%，100%）旋转（-360度）；
}
}

重新加载代码段
单击另一个按钮查看问题之前

或，
在单击按钮查看无问题之前重置（显示：“无”）：
点击
1秒超时
2秒超时
3秒超时
重置
对它进行了测试，非常确定它通过使用类解决了所有浏览器的问题。有更多的方法来处理它，但是把动画放在一个新的类中，这个类只有在点击按钮后才能被添加

在CSS中，我将animation属性移动到一个新类中，新类还添加了块样式

.anim-start {
  display: block;
  animation: animate 1.5s;
}

在JS中，我只将
style.display='block'
更改为
anims[i].classList.add（'anim-start'）

见：

使用新类的这种方法使它更容易。例如，如果要从不透明度0转换为1，该怎么办？从“无显示”开始时很难做到这一点。如果您只是想使用可见性，以便元素仍然占据空间，该怎么办？
从我可以猜到的问题是，firefox最初不查看显示状态，即使在
display:none
时也不运行动画。一个解决方案（无论如何，这是一个好主意）可能是使用动画属性设置一个类，而不是依赖于显示状态。@René我尝试过使用类，结果完全一样。