JavaScript 中的淡入 Div
CSS 动画可以帮助你制作从一个 CSS 样式位置到另一个位置的动画过渡。
动画包含组件、描述 CSS 动画的样式，以及暗示动画样式的开始和结束状态以及参考点之间的所有状态的关键帧序列。
在今天的文章中，我们将学习使用纯 JavaScript 淡入和淡出 div。
JavaScript 中的淡入 Div
CSS fade 过渡是一种元素（例如文本、图像或背景）在页面上逐渐出现或消失的效果。要创建这些效果，请使用 CSS 中的过渡或动画属性。
在 JavaScript 中创建淡入函数的步骤
- 用
0.1初始化opacity变量。 - 将元素的
display属性设置为block以使其作为单独的框可见。 - 定义计时器，每
500毫秒触发一次，将不透明度更新10%。 - 一旦设置了
opacity，将元素的过滤器属性更新为新的不透明度。 - 一旦元素的不透明度达到
1，清除间隔并停止计时器。
让我们用 Hello World! 创建一个 div 文本。每次页面加载时，都会播放此动画，并且页面似乎会淡入。
可以在设置的间隔内设置渐变时间。
<div id="fadeEl" class="fadeElClass"
onclick="fadeIn()">
Hello World!
</div>
.fadeElClass {
width: 200px;
height: 20px;
text-align: center;
background: red;
}
function fadeIn() {
const element = document.getElementById('fadeEl');
console.log(element.style);
// Initilize the opacity with 0.1
let initOpacity = 0.1;
element.style.display = 'block';
// Update the opacity with 0.1 every 10 milliseconds
const timer = setInterval(function () {
if (initOpacity >= 1) {
clearInterval(timer);
}
element.style.opacity = initOpacity;
element.style.filter = 'alpha(opacity=' + initOpacity * 100 + ")";
initOpacity += initOpacity * 0.1;
}, 500);
}
fadeIn()
尝试在任何浏览器中运行上述代码；它会在 hello world 文本中从 0.1 淡化到 1 不透明度。
输出：
淡入前：
淡入后：
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn