rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

comments

Browse source
This commit is contained in:
Rhiannon Morris 2024-09-26 16:15:28 +02:00
parent 431e04c82b
commit 7ca1fa126d
1 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

24
script/run.ts
View file

@ -260,19 +260,27 @@ namespace Flat {
export function fadeTo(newPane: Pane): void { export function fadeTo(newPane: Pane): void {
for (const pane of allPanes) { for (const pane of allPanes) {
const here = pane == newPane;
const elem = document.getElementById(pane)!; const elem = document.getElementById(pane)!;
if (here) { if (pane == newPane) {
// show new pane
//
// - "entering" state is displayed and z-index 1, but opacity 0
// - "active" state is fully showing
//
// "entering" exists because firefox doesn't animate a
// transition out of `display: none`
elem.dataset.state = 'entering'; elem.dataset.state = 'entering';
setTimeout(() => elem.dataset.state = 'active'); setTimeout(() => elem.dataset.state = 'active');
// elem.addEventListener('transitionend',
// () => elem.dataset.state = 'active',
// {once: true});
history.replaceState(null, '🦎', `#${pane}`); history.replaceState(null, '🦎', `#${pane}`);
} else if (elem.dataset.state == 'active') { } else if (elem.dataset.state == 'active') {
elem.addEventListener('transitionend', // hide old pane
() => elem.dataset.state = 'hidden', //
{once: true}); // - "leaving" is z-index -1 and opacity 0
// - "hidden" is `display: none`
//
// separate for the same reason as above
function hide() { elem.dataset.state = 'hidden'; }
elem.addEventListener('transitionend', hide, {once: true});
elem.dataset.state = 'leaving'; elem.dataset.state = 'leaving';
} }
} }