加载淡入淡出不起作用

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;
}

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

并且此文本在 Google 开发工具中被划掉

Answer 1

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

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

Answer 2

尝试定义

opacity: 1 !important;

id 选择器的优先级高于 class

这是一个流程逻辑清晰的片段。在 body 加载之前元素是不可见的。一旦事件主体 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 3

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

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

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

转换结束后，将不再需要此 class，可以将其删除。

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

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

加载淡入淡出不起作用

Fade on load doesn't work

javascript

css

fade

JSFIDDLE