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