页面加载时的不透明度转换不会在加载时启动

Question

我想通过在整个身体上快速更改不透明度来获得非常简单的加载效果。因此，我使用以下CSS

body { 
    opacity: 0; 
    transition: opacity 2s; 
} 

body.show-page { 
    opacity: 1; 
} 

并在加载时添加.show-page。这里是现场代码http://plnkr.co/edit/Ze5TiqkZYiM41VJZVDuB?p=preview

由于某些原因，它不会过渡。加载页面后，如果我添加/删除此类，则转换工作，但加载时不会发生。任何想法为什么？

Answer 1

你的脚本将身体前运行已完成加载的脚本是身体标签内。

你也许想是这样的：

function fadeIn() { 
    var body = document.getElementsByTagName('body')[0]; 
    body.className += 'show-page'; 
} 
window.onload = fadeIn; 

Updated Plunker

Answer 2

一种解决方法可以稍微延迟（50毫秒）的JS这样做：

setTimeout(function(){body.className += 'show-page';}, 50);