将显示设置为可见状态后是否运行元素动画？

Question

将显示设置为阻止后是否运行动画？

我正在设置元素的动画样式，然后将显示从无设置为阻塞。它正在为我播放动画，但我读过显示不会触发动画。谁是正确的？

部分代码：

// method 1 - enable a media query
var animation = "fadein 1s ease-out";
element.style.setProperty("animation", null, "important");
element.style.setProperty("animation", animation, "important");
enableQuery(rule); // manually enable a media query


// method 2 - set display none to block
element.style.display = "block";
var animation = "fadein 1s ease-out";
element.style.setProperty("animation", null, "important");
element.style.setProperty("animation", animation, "important");

CSS

@keyframes fadein {

    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }

}

如果您在媒体查询之外没有显示，然后您启用了将显示设置为阻止的媒体查询，那么这会导致动画播放吗？ requestAnimationFrame 是否适合其中任何一种？

Answer 1

来自the specification：

将 display 属性设置为 none 将终止应用于元素及其后代的任何正在运行的动画。如果元素的 display 为 none，则将 display 更新为 none 以外的值将启动通过 animation-name 属性应用于该元素的所有动画，以及应用于具有非 none 显示的后代的所有动画。

我没有什么要补充的了。我想这很清楚。