Brosef/Website
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Made tab transition time more dynamic

Browse Source
This commit is contained in:
Brosef
2026-02-08 01:41:09 +00:00
parent 7d7e1774c5
commit 61aa22e05b
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
main.js
View File

@ -35,6 +35,7 @@ function switchTab(tabID, playAnimation=true) {
tabID = tabID.id.split('button-')[1]; tabID = tabID.id.split('button-')[1];
} }
let tabTransitionTime = Number(getComputedStyle(document.body).getPropertyValue('--tab-transition-time').slice(0, -2));
let tabs = document.getElementsByTagName('main')[0].children; let tabs = document.getElementsByTagName('main')[0].children;
let tab = document.getElementById(`tab-${tabID}`); let tab = document.getElementById(`tab-${tabID}`);
let buttons = document.getElementsByTagName('header')[0].getElementsByTagName('button'); let buttons = document.getElementsByTagName('header')[0].getElementsByTagName('button');
@ -51,7 +52,7 @@ function switchTab(tabID, playAnimation=true) {
if (tabs[i] == tab) { continue; } if (tabs[i] == tab) { continue; }
tabs[i].classList.add('hiddenTab'); tabs[i].classList.add('hiddenTab');
if (playAnimation) { if (playAnimation) {
setTimeout(() => { tabs[i].style.display = 'none'; }, 500); setTimeout(() => { tabs[i].style.display = 'none'; }, tabTransitionTime);
} else { } else {
tabs[i].style.display = 'none'; tabs[i].style.display = 'none';
} }
@ -68,7 +69,7 @@ function switchTab(tabID, playAnimation=true) {
// Show selected tab // Show selected tab
if (playAnimation) { if (playAnimation) {
setTimeout(() => { tab.style.display = 'unset'; }, 500); setTimeout(() => { tab.style.display = 'unset'; }, tabTransitionTime);
} else { } else {
tab.style.display = 'unset'; tab.style.display = 'unset';
} }

3
styles.css
View File

@ -8,6 +8,7 @@
--button-border-highlight-colour: #f7b3a9; --button-border-highlight-colour: #f7b3a9;
--header-size: 50px; --header-size: 50px;
--tab-transition-time: 250ms; /* Must be in ms for JS parsing */
} }
@ -58,7 +59,7 @@ main {
main > article { main > article {
display: unset; display: unset;
transition: filter 0.5s, opacity 0.5s; transition: filter var(--tab-transition-time), opacity var(--tab-transition-time);
} }
.hiddenTab { .hiddenTab {