Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-16 05:24:56 +01:00
Code Issues Projects Releases Wiki Activity

transitions

Browse source
This commit is contained in:
Gauthier Roebroeck 2025-06-04 11:19:13 +08:00
parent 3ef78da65b
commit dd7a01b18a
3 changed files with 48 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
tsugini/src/components/app/drawer/menu/Server.vue
View file

@ -1,5 +1,6 @@
<template>
<q-expansion-item
v-model="expanded"
icon="mdi-cog"
:label="
$formatMessage({
@ -12,12 +13,14 @@
<template #header>
<q-item-section avatar>
<q-icon name="mdi-cog">
<q-badge
v-if="unreadCount > 0"
color="info"
rounded
floating
/>
<Transition name="fab">
<q-badge
v-if="!expanded && unreadCount > 0"
color="info"
rounded
floating
/>
</Transition>
</q-icon>
</q-item-section>
<q-item-section>
@ -73,15 +76,15 @@
}}
</q-item-label>
</q-item-section>
<q-item-section
side
v-if="unreadCount > 0"
>
<q-badge
color="info"
rounded
>{{ unreadCount }}</q-badge
>
<q-item-section side>
<Transition name="fab">
<q-badge
v-if="unreadCount > 0"
color="info"
rounded
>{{ unreadCount }}</q-badge
>
</Transition>
</q-item-section>
</q-item>
@ -167,4 +170,10 @@
import { useAnnouncements } from 'colada/queries/announcements'
const { unreadCount } = useAnnouncements()
const expanded = ref<boolean>(false)
</script>
<style scoped lang="scss">
@use 'styles/transitions/fab';
</style>

13
tsugini/src/styles/transitions/_fab.scss Normal file
View file

@ -0,0 +1,13 @@
.fab {
&-enter-active,
&-leave-active {
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
&-enter-from,
&-leave-to {
opacity: 0;
transform: rotate(180deg) scale(0.2) skew(20deg);
filter: hue-rotate(90deg);
}
}

11
tsugini/src/styles/transitions/_fade.scss Normal file
View file

@ -0,0 +1,11 @@
.fade {
&-enter-active,
&-leave-active {
transition: opacity 0.5s ease;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
}