diff --git a/script/run.ts b/script/run.ts index 9026213..ef7dea8 100644 --- a/script/run.ts +++ b/script/run.ts @@ -263,16 +263,17 @@ export function fadeTo(newPane: Pane): void { const here = pane == newPane; const elem = document.getElementById(pane)!; if (here) { - elem.style.display = 'unset'; - setTimeout(() => { - elem.dataset.selected = 'true'; - history.replaceState(null, '🦎', `#${pane}`); - }); - } else if (elem.dataset.selected == 'true') { + elem.dataset.state = 'entering'; + setTimeout(() => elem.dataset.state = 'active'); + // elem.addEventListener('transitionend', + // () => elem.dataset.state = 'active', + // {once: true}); + history.replaceState(null, '🦎', `#${pane}`); + } else if (elem.dataset.state == 'active') { elem.addEventListener('transitionend', - () => elem.style.display = 'none', + () => elem.dataset.state = 'hidden', {once: true}); - elem.dataset.selected = 'false'; + elem.dataset.state = 'leaving'; } } } @@ -307,8 +308,7 @@ function setup(): void { box.checked = true; } else { const elem = document.getElementById(pane)!; - elem.dataset.selected = 'false'; - elem.style.display = 'none'; + elem.dataset.state = 'hidden'; } } } diff --git a/style/flat.css b/style/flat.css index 92fcc30..5ddebd7 100644 --- a/style/flat.css +++ b/style/flat.css @@ -98,17 +98,25 @@ body { transition: background 0.1s ease-in; } -#cube > section[data-selected=true] { +#cube > :is(section[data-state=entering], #a) { + z-index: 1; + opacity: 0; +} + +#cube > :is(section[data-state=active], #a) { z-index: 1; opacity: 1; transition: opacity 0.1s ease-in; } -#cube > section[data-selected=false] { +#cube > :is(section[data-state=leaving], #a) { z-index: -1; opacity: 0; transition: opacity 0s 0.1s ease-in; } -/* todo make sure this works ok with screen readers */ + +#cube > :is(section[data-state=hidden], #a) { + display: none; +} }