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

Question

我希望有一个非常简单的加载效果，整个身体的快速不透明度变化。所以我使用以下CSS

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

body.show-page {
  opacity: 1;
}

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

由于某种原因，它没有过渡。加载页面后，如果我添加/删除此类，则转换有效，但在加载时，它不会发生。知道为什么吗？

Answer 1

一种解决方法是稍微延迟（50ms）你的JS这样做：

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

Answer 2

您的脚本将在body完成加载之前运行，因为脚本位于body标记内。

你可能想要这样的东西：

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

Updated Plunker