Seeking assistance with implementing a transition effect between sections on a single-page application. All sections are located on the same page, but only one section is displayed at a time. When an event occurs, the display property of the requested section is toggled to appear. I want to introduce a delay in displaying the incoming section, like after 5 seconds, rather than it appearing immediately. How can I achieve this? I have tried using setTimeout but it doesn't seem to work as expected. Here is an overview of the problem:
All sections except one have display set to none.
An event triggers the display of the requested section and toggles the display property of other sections.
Upon a section request, there should be a transition or timeout before the section is displayed. HTML code snippet is provided below.
HTML
<div class="main-container">
<div class="page padding main" id="page-main">
<!-- Content of the main page -->
</div>
<div class="page u-none" id="page-login">
<!-- Login page content -->
</div>
<div class="page u-none" id="page-signup">
<!-- Signup page content -->
</div>
<div class="page u-none" id="page-dashboard">
<!-- Dashboard page content -->
</div>
</div>
CSS
nav {
display: flex;
}
/* Utility classes */
.u-none {
display: none;
opacity: 0;
animation: 2s fadeIn forwards;
}
@keyframes fadeIn {
100% {
opacity: 1;
display: block;
}
}
Javascript
const ELS_pages = document.querySelectorAll('.page');
const ELS_buttons = document.querySelectorAll('[data-page]');
const submit = document.querySelector('.submit');
const goToPage = (id) => {
ELS_pages.forEach((EL, i) => {
setTimeout(() => {
if (EL.id === id) {
EL.classList.remove('u-none');
} else {
EL.classList.add('u-none');
}
}, 5000); // Adjust the delay here (in milliseconds)
});
};
ELS_buttons.forEach((EL) =>
EL.addEventListener('click', () => {
goToPage(EL.dataset.page);
})
);