将显示设置为可见状态后，元素动画是否运行？ [英] Does an element animation run after setting display to a visible state?

问题描述

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

Does an animation run after setting the display to block?

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

I'm setting the animation style of an element and then setting the display from none to block. It is playing the animation for me but I've read that display doesn't trigger animations. Who is correct?

部分代码：

// 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;
    }

}

如果显示的内容不在媒体查询，然后启用媒体查询以将显示设置为阻止，然后将导致动画播放？

If you display is none outside of a media query and then you enable a media query that sets the display to block then that would cause the animation to play? Does requestAnimationFrame fit into any of this?

推荐答案

来自规范：

将display属性设置为none将终止应用于元素及其后代的任何运行动画。如果某个元素不显示任何内容，则将显示更新为除none之外的其他值将启动通过animation-name属性应用到该元素的所有动画，以及应用于所有显示后没有显示的子代的所有动画。

Setting the display property to none will terminate any running animation applied to the element and its descendants. If an element has a display of none, updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none.

我无话可说了。我想这很清楚。

I have nothing more to add. I guess it's pretty clear.

这篇关于将显示设置为可见状态后，元素动画是否运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！