页面加载时的不透明度过渡不会在加载时启动

Question

我想要一个非常简单的加载效果，整体上的不透明度变化很快body。所以我使用以下 CSS

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

body.show-page {
  opacity: 1;
}

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

出于某种原因，它没有转换。页面加载后，如果我 add/remove this class，则过渡有效，但在加载时，它不会发生。知道为什么吗？

Answer 1

一种解决方法是稍微延迟（50 毫秒）您的 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;

Opacity transition on page load does not kicks in on load