Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added transition to updating event

Browse Source
This commit is contained in:
Alexis
2024-06-04 18:31:26 +02:00
parent 5f6a8e46c6
commit 373484f17c
3 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/calendar/state/monthly/DayTile.vue
View File

@@ -107,9 +107,11 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
'opacity-40': props.faded && !isSelectedDate
}"
>
<li v-for="event in eventsToDisplay" :key="event.title" class="grid pointer-events-auto">
<CalendarEventButton :event :tile-date="date" />
</li>
<TransitionGroup name="event">
<li v-for="event in eventsToDisplay" :key="event.title" class="grid pointer-events-auto">
<CalendarEventButton :event :tile-date="date" />
</li>
</TransitionGroup>
<li v-if="eventsNotDisplayed > 0" class="pointer-events-auto">
<UiPopover>
@@ -159,4 +161,21 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
border-top-width: 1px;
}
}
.event-enter-active {
transition: all 120ms ease-in-out;
}
.event-leave-active {
transition: all 180ms ease-in-out;
}
.event-enter-from,
.event-leave-to {
opacity: 0;
}
.event-enter-from {
transform: translateX(.15rem);
}
.event-leave-to {
transform: translateX(-.5rem);
}
</style>