gpt4 book ai didi

javascript - 更改显示属性会使不透明度过渡无效

转载 作者:行者123 更新时间:2023-11-27 22:58:14 25 4
gpt4 key购买 nike

<分区>

使用 JavaScript 通过 transition: opacity 1s 更改元素的不透明度,您预计转换需要一秒钟,它做到了 here :

onload = e => {
var p = document.getElementsByTagName("p")[0];

p.style.opacity = 1;
};
p {
opacity: 0;
transition: opacity 1s;
}
<p>
Lorem ipsum...
</p>

但是,如果元素有 display: none 并且您首先将其更改为 display: initial(以便看到它),然后再更改不透明度,则过渡不再作品,你可以看到here :

onload = e => {
var p = document.getElementsByTagName("p")[0];

p.style.display = "initial";
p.style.opacity = 1;
};
p {
display: none;
opacity: 0;
transition: opacity 1s;
}
<p>
Lorem ipsum...
</p>

这是为什么?

注意:我没有在显示属性上使用过渡,我也没有为此寻找解决方法。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com