加载淡入淡出不起作用
Fade on load doesn't work
所以我找到了这个解决方案 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 开发工具中被划掉
将重要添加到您的 class 属性。
.load{
opcacity: 1 !important; //because you have id selector with opacity to 0.
}
尝试定义
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>
作为一种好的做法,尽量避免使用 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>
JSFIDDLE
所以我找到了这个解决方案 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 开发工具中被划掉
将重要添加到您的 class 属性。
.load{
opcacity: 1 !important; //because you have id selector with opacity to 0.
}
尝试定义
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>
作为一种好的做法,尽量避免使用 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>