select animated

codeswing.json

{
  "scripts": [],
  "styles": [],
  "themePreview": false
}

index.html

<ul style="--count:8">
	<li style="--i:0">Hello</li>
	<li style="--i:1">Bonjour</li>
	<li style="--i:2">Hola</li>
	<li style="--i:3" class="active">안녕하세요</li>
	<li style="--i:4">Hello</li>
	<li style="--i:5">Bonjour</li>
	<li style="--i:6">Hola</li>
	<li style="--i:7">안녕하세요</li>
</ul>

script.js

const state = Symbol()
const list = document.querySelector('ul')
const items = list.querySelectorAll('li')

list.addEventListener('click', (e) => {
	list[state] = !list[state]
	list.classList.toggle('open', list[state])
})

items.forEach((item) => {
	item.addEventListener('click', (e) => {
		e.stopPropagation()
		if (list[state]) {
			list.querySelector('.active').classList.remove('active')
			item.classList.add('active')
		}
		list[state] = !list[state]
		list.classList.toggle('open', list[state])
	})
})

style.scss

body {
	background-color: #1f1f1f;
	color: white;
}

ul {
	--count: 1;
	position: relative;
	z-index: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 300px;
	clip-path: inset(0 0 -100vh 0);
	cursor: pointer;
	pointer-events: none;
	height: 3em;

	&::before {
		content: '';
		height: 100%;
		width: 100%;
		position: absolute;
		background: black;
		pointer-events: all;
		opacity: .3;
	}
}

li {
	--i: 0;
	display: block;
	box-shadow: inset 0 0 0 1px lime;
	padding: 0 1em;
	line-height: 3em;
	transform: translateY(calc(var(--count) * -100%));
	transition: transform 1s;
	pointer-events: all;

	&.active {
		transform: translateY(calc(var(--i) * -100%));
		position: relative;
		z-index: 1;
		background: rgba(green, .5);
	}
}

ul.initial {
	li.active {
		position: absolute;
		top: 0;
	}
}

ul.open {
	li {
		transform: translateY(100%);
	}
}