HTML锚元素和onload

Question

我一直在看W3 Schools： http : //www.w3schools.com/tags/tag_a.asp作为锚元素，我有点困惑，因为它没有涉及到CSS的所有部分。 我知道这里有一个：active，但是剩下的是完整列表吗？

我之所以需要它，是因为我的第二个问题涉及到这些锚标记或其中的任何一个。 我试图拥有它，以便在网站完全加载后，它将CSS从

-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

至

-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;

我试图通过将body元素放入具有第一个CSS的类中来进行此操作。 然后，我将元素onload="then the second CSS here" then放入onload="then the second CSS here" 。 这似乎并没有使它从灰色逐渐消失为透明。

这正是我想要得到的：加载页面时，我发布的第一个CSS会稍微变灰，然后在完全加载后过渡以将其清除。 这将发生在内部所有元素以及body元素本身。

我对如何做到这一点感到困惑。

Answer 1

访问mdn以获取更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/ :active#See_also

然后，在页面加载时使用过渡：

 window.onload= function(){ document.querySelector("#loadStage").classList.add("loaded"); } i=0; while( i++ < 1000000 ); //emulate page load 

 #loadStage{ background:#aaa; transition: background-color 1s; width:300px;height:300px } #loadStage.loaded{ background: green; } 

 <div id="loadStage" class="initial"></div> 

Answer 2

这是您尝试使用onload的非常简化的版本。

非常长的图片（5.5mb）：

<img src='http://upload.wikimedia.org/wikipedia/commons/2/29/Mignon_Vanitas.png?343243dfdf4515' style='width: 500px; height: 500px;'/>

的onload ：

<script>
window.onload = function(){
    document.body.style.opacity = 1;
};
</script>

http://jsfiddle.net/r7r6osy7/1/

要使其过渡，请参阅@Gael的答案（提示：您在包含元素上使用类，例如将yourTransitionClassName添加到document.body元素）。

注意：在?后面更改数字? 在图片网址中，例如

http://upload.wikimedia.org/wikipedia/commons/2/29/Mignon_Vanitas.png ？ 343243dfdf4515

进行更改以重新加载映像并再次触发onload处理程序。

编辑：

使用opacity过渡：

<style>
body {
    background-color: black;
    opacity: .2;
}
body.transition {
    transition:  opacity 1s;
    opacity: 1;
}
</style>

<script>
window.onload = function(){
    document.body.classList.add('transition');
};
</script>

http://jsfiddle.net/r7r6osy7/3/