CSS Transition + Flexbox Order Test

by MegaScience

HTML

<div class="Explanation">Click to begin transition, click again to revert.</div>
<span>Test Span 1</span>
<span>Test Span 2</span>
<span>Test Span 3</span>
<span>Test Span 4</span>
<span>Test Span 5</span>
<span>Test Span 6</span>
<span>Test Span 7</span>
<span>Test Span 8</span>
<span>Test Span 9</span>
<span>Test Span 10</span>

CSS

html {
    background-color: black;
    color: white;
}

body {
    display: flex;
    flex-flow: column;
    counter-reset: counties;
}

div.Explanation {
    order: -100;
}

span {
    counter-increment: counties;
    order: var(--default-position);
    transition: order linear min(calc(var(--default-position) * 500ms), 3s);
}

span.clicked {
    color: red;
    order: -1 !important;
}

span::before {
    color: grey;
    content: counter(counties) ": ";
}

JavaScript

function main() {
	const spans = document.body.querySelectorAll('span')
    // Reference: https://stackoverflow.com/a/33352604
	const style = Array.from({length: spans.length}, (_, i) => `span:nth-of-type(${++i}) {
	--default-position: ${i};
}`)
    // Reference: https://stackoverflow.com/a/28662118
	document.head.insertAdjacentHTML('beforeend', `<style>${style.join('\n\n')}</style>`)
	for(const span of spans) span.addEventListener('click', e => e.currentTarget.classList.toggle('clicked'))
}

main()