From Callback to Async/Await: Sequential Fade-In Animation
·2 mins
Table of Contents
Note: This post is translated by AI. If you find any unnatural phrasing or errors, please feel free to contact me via email or other channels. Your feedback is appreciated!
Foreword #
The article is aimed at those know the concept of Callback Hell, Promise and Async/Await, but haven’t dealt with it or not completely understand the difference.
I will guide you the three ways to implement “Sequential Fade In elements after clicking a button”.
The MVP will look like this:
Intuitive solution:
- For fade in, add
transitionto elements, and change theopacitywhile clicking the button. - Sequential Fade In? The latter element’s fading in has to “wait” for the fore elements fading in.
- If you want to “wait” in JavaScript, the first thing comes to my mind is
setTimeout. Waiting one by one is about calling asetTimeoutafter asetTimeoutcountdown.
So, the code is like this:
const startBtn = document.getElementById('startBtn');
const container = document.getElementById('container');
const first = document.getElementById('first');
const second = document.getElementById('second');
const third = document.getElementById('third');
const forth = document.getElementById('forth');
const fifth = document.getElementById('fifth');
const resetBtn = document.getElementById('reset');
startBtn.addEventListener('click', function () {
this.style.display = 'none';
container.classList.remove('hidden');
setTimeout(() => {
first.classList.remove('hidden');
setTimeout(() => {
second.classList.remove('hidden');
setTimeout(() => {
third.classList.remove('hidden');
setTimeout(() => {
forth.classList.remove('hidden');
setTimeout(() => {
fifth.classList.remove('hidden');
setTimeout(() => {
resetBtn.classList.remove('hidden');
}, 500);
}, 500);
}, 500);
}, 500);
}, 500);
}, 500);
});
That’s it! Each Element can fade in each 0.5 seconds after clicking the startBtn. Is it the end? Uh…there’s something weird…Is it the notorious Callback Hell?