【问题标题】：Fade on load doesn't work负载淡入淡出不起作用
【发布时间】：2017-06-27 11:23:18
【问题描述】：

所以我找到了这个解决方案Using CSS for fade-in effect on page load 并且我已经将方法 2 与原始 JavaScript 一起使用。这是我的代码示例

JavaScript

var fadeOnLoad = function () {
  document.getElementById("wrapper").className += "load";
};
fadeOnLoad();

CSS

#wrapper {
  opacity: 0;
  transition: opacity 2s ease-in;
}

.load {
  opacity: 1;
}

链接到它不起作用的网站https://skidle.github.io/projects/weather

这个文本在谷歌开发工具中被划掉了

【问题讨论】：

opacity: 1 !important; ? id 选择器的优先级高于类

标签： javascript css fade

【解决方案1】：

将重要添加到您的类属性。

.load{
      opcacity: 1 !important; //because you have id selector with opacity to 0.
      }

【讨论】：

【解决方案2】：

尝试定义

opacity: 1 !important;

id 选择器的优先级高于类

这是一个具有清晰流程逻辑的sn-p。在加载主体之前，元素是不可见的。一旦事件主体 onload 被触发，元素就会得到opacity: 1;

function fadeOnLoad() {
  document.getElementById("wrapper").className = "";
};

#wrapper {
  transition: opacity 2s ease-in;
}

.not_loaded {
  opacity: 0;
}

<body onload="fadeOnLoad()">
<div id="wrapper" class="not_loaded">text</div>
</body>

【讨论】：

或优化您的选择器：#wrapper.load{opacity:1;}

【解决方案3】：

作为一种良好做法，尽量避免使用 ID 进行样式设置。

不要在#wrapper 选择器中定义转换，而是创建一个包含transition 属性的类，如下所示：

.opacity-transition {
  transition: opacity 2s ease-in;
}

一旦过渡结束，这个类将不再需要并且可以被移除。

创建另一个类以最初隐藏#wrapper 元素。当这个类被移除时，它会触发转换。

.hidden {
  opacity: 0;
}

代码片段：

function fadeOnLoad() {
  //Cache the selector.
  var wrapper = document.getElementById("wrapper");
  console.log(wrapper.className);
  //Add event listener for transition end.
  wrapper.addEventListener("transitionend", function() {
    //Remove the class which is not needed anymore.
    this.classList.remove("opacity-transition");
    console.log(this.className);
  });
  //Remove hidden class to start the transition.
  wrapper.classList.remove("hidden");

};

.opacity-transition {
  transition: opacity 2s ease-in;
}
.hidden {
  opacity: 0;
}

<body onload="fadeOnLoad()">
  <div id="wrapper" class="opacity-transition hidden">
    text</div>
</body>

JSFIDDLE

【讨论】：