Question

我一直在关注W3 Schools：http://www.w3schools.com/tags/tag_a.asp的锚元素，我有点困惑，因为它没有覆盖它的所有CSS部分。我知道有一个：主动，但剩下的是什么，一个完整的清单？

我需要这个，因为我的第二个问题涉及一些锚标签或其他任何被调用的标签。我试图让它在网站完全加载后，它改变了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"。这似乎并没有从灰色到清晰淡化。

这正是我想要得到的：当你加载页面时，它会在我发布的第一个CSS中稍微变灰，然后在完全加载后将其转换为清除。这将发生在内部的一切和身体元素本身。

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

Answer 1

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

然后，在加载页面时使用转换：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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/

HTML Anchor元素＆amp;负载

2 个答案: