39 lines
989 B
Vue
39 lines
989 B
Vue
<script setup lang="ts">
|
|
import { useSnackbarStore } from '@/stores/snackbar.ts'
|
|
|
|
const snackbarStore = useSnackbarStore()
|
|
</script>
|
|
|
|
<template>
|
|
<v-snackbar-queue
|
|
ref="queue"
|
|
v-model="snackbarStore.snackbarQueue"
|
|
location="top end"
|
|
timeout="5000"
|
|
total-visible="5"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.bouncy-slide-x-transition-enter-active,
|
|
.bouncy-slide-x-transition-leave-active,
|
|
.bouncy-slide-x-transition-move,
|
|
.bouncy-slide-x-reverse-transition-enter-active,
|
|
.bouncy-slide-x-reverse-transition-leave-active,
|
|
.bouncy-slide-x-reverse-transition-move {
|
|
transition: transform, opacity;
|
|
transition-duration: 0.5s;
|
|
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
.bouncy-slide-x-transition-enter-from,
|
|
.bouncy-slide-x-transition-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-30%);
|
|
}
|
|
.bouncy-slide-x-reverse-transition-enter-from,
|
|
.bouncy-slide-x-reverse-transition-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(30%);
|
|
}
|
|
</style>
|