JSFIDDLE

Question

所以我找到了这个解决方案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

此文字已在Google Dev工具中删除

Answer 1

尝试定义

opacity: 1 !important;

id选择器的优先级高于class

这是一个具有清晰流程逻辑的代码段。在身体被装载之前，元素是不可见的。一旦事件正文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>

Answer 2

为您的类属性添加重要内容。

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

Answer 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>

淡化负载并不起作用

3 个答案:

JSFIDDLE