add entrance transition

src/components/EventSelector.vue

@@ -1,9 +1,9 @@
 <template>
-	<div class="registration-event-selector">
+	<div class="event-selector">
 		<p v-if="props.label" class="t-form__label" :class="{required: props.requiredMark}" v-text="props.label" />
 		<div v-if="props.eventList.length" class="group" role="group">
 			<button
-				v-for="item in props.eventList"
+				v-for="(item, index) in props.eventList"
 				:key="item.id || item.name"
 				type="button"
 				class="item bg-white"
@@ -11,6 +11,7 @@
 				:title="item.name"
 				:disabled="props.disabled || !item.id"
 				:aria-pressed="isSelected(item.id)"
+				v-entrance-transition="index * 30"
 				@click="toggleEvent(item.id)"
 			>
 				<span
@@ -62,7 +63,7 @@ const toggleEvent = (eventId?: string) => {
 </script>
 
 <style scoped lang="less">
-.registration-event-selector {
+.event-selector {
 	width: 100%;
 	display: grid;
 	gap: .5rem;
@@ -145,7 +146,7 @@ const toggleEvent = (eventId?: string) => {
 }
 
 :global(html.theme-dark) {
-	.registration-event-selector {
+	.event-selector {
 		.t-form__label {
 			color: #94a3b8;
 		}