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

【问题标题】：Opacity transition on page load does not kicks in on load页面加载时的不透明度过渡不会在加载时启动
【发布时间】：2017-06-24 19:32:46
【问题描述】：

我想要一个非常简单的加载效果，并在整个身体上快速改变不透明度。所以我使用以下CSS

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

body.show-page {
  opacity: 1;
}

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

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

【问题讨论】：

【解决方案1】：

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

你可能想要这样的东西：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：