Html CSS中不透明度为0的元素在页面加载时最初不是零

我想在CSS中将元素的不透明度设置为0。但事实证明，一开始它实际上不是0。如果我将“过渡”设置为“不透明度”，它将首先显示元素是完全不透明的，然后慢慢淡出。这是我的CSS：

.nav覆盖{
排名：0；
左：0；
宽度：100vw；
高度：100vh；
z指数：9；
不透明度：0；
过渡：不透明度0.3s缓进缓出；
}

文件
试验

正如Amaury Hanser所建议的，一旦CSS文件被加载和解析，

不透明度

已经是它的默认值1

您可以立即在HTML中设置

不透明度的初始值

：

<div class="nav-overlay" style="opacity:0">
  <h1>Test</h1>
</div>

---

尽管我认为直接在html元素上设置样式比在html中使用

标记要干净一些，但这两种方法都可以。（只要它对您的情况有效）

我所做的是使用此javascript代码添加一个无显示类，而不是像其中一个家伙所说的不透明。这适用于页面加载后不希望立即可见的任何元素：

    export default function preventLoadingElement() {
    //Prevents opacity elements from appearing while loading
    let preventLoadingElement = document.querySelectorAll(".no-display");
    if(preventLoadingElement[0]) {
        preventLoadingElement.forEach(element => {
            if (element !== null) {
                setTimeout(function() {
                    element.classList.remove("no-display");   
                }, 100);
            }     
        });
    }
}

---

这可能只是加载和解析文件所需的时间。我试图为您制作一段代码片段。输出中没有显示任何内容。@DebsmitaPaul您好，谢谢您的回复。在运行代码段时，stackoverflow似乎将CSS直接放在HTML中，因此该元素如预期的那样立即透明。我想阿莫里·汉瑟说的有道理。但是，有没有一种方法可以让CSS文件在向DOM插入HTML元素之前先加载并解析？显然，在任何转换发生之前，浏览器首先会看到其初始CSS值，因此浏览器会看到

opacity:0并且还没有转换。使用JavaScript触发转换。您好，谢谢您的回复。实际上，我不想在页面加载时播放淡入淡出的动画。我希望元素最初是完全透明的。但是我需要转换属性集，因为如果将来我想将不透明度设置为1，我希望它慢慢地改变，而不是立即变为不透明。我现在明白了，我已经相应地编辑了我的答案，希望它能有所帮助。然后删除
.nav overlay{opacity:0；}
，然后再添加另一个类，如
.nav-overlay.vash{opacity:0；}
并在需要时像
document.querySelector（'.nav overlay'）.classList.add（'vash'）
。
    export default function preventLoadingElement() {
    //Prevents opacity elements from appearing while loading
    let preventLoadingElement = document.querySelectorAll(".no-display");
    if(preventLoadingElement[0]) {
        preventLoadingElement.forEach(element => {
            if (element !== null) {
                setTimeout(function() {
                    element.classList.remove("no-display");   
                }, 100);
            }     
        });
    }
}