I've been working on expanding my book collection and experimenting with creating a notification icon that features a circular expansion animation. My setup involves Vue 3 with Vuetify, displaying multiple cards in grid format with rows and columns.
However, I encountered an issue where the animation gets cropped when it reaches the border of a card or column. I am looking for a solution to make the animation extend beyond these boundaries.
https://i.sstatic.net/gtWuU.png
<template>
<v-card class="rounded-0 test" width="300px">
<v-img
:src="img"
gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.8)"
cover
>
<v-container class="fill-height" fluid>
<v-row v-if="newestVols" class="align-self-start full-width">
<v-spacer></v-spacer>
<v-col cols="3">
<v-btn
class="icon info-icon"
variant="plain"
color="red"
icon="mdi-exclamation-thick"
:ripple="false"
>
</v-btn>
</v-col>
</v-row>
<v-row class="align-self-end full-width">
<v-col cols="12">
<v-card-title
class="text-white pointer"
@click="dialog = true"
style="cursor: pointer"
>
{{ title }}
<v-dialog v-model="dialog" width="auto">
<v-card>
<v-container fluid>
<v-row justify="center">
<v-col
v-for="vol in sortedArray"
:key="vol.id"
class="d-flex justify-center fill-height"
>
<BookCard
:title="title"
:cover="vol.cover"
:number="vol.number"
:id="vol.id"
:editionID="id"
:showRemoveButton="true"
/>
</v-col>
</v-row>
</v-container>
<v-card-actions>
<v-btn color="primary" block @click="dialog = false">Close Dialog</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-card-title>
</v-col>
</v-row>
</v-container>
</v-img>
</v-card>
</template>
<script>
import BookCard from "./BookCard.vue";
export default {
props: {
img: {
type: String,
},
title: {
type: String,
},
volumes: {
type: Array,
default: [],
},
id: {
type: Number,
},
volumes: {
type: Array,
default: [],
},
},
components: {
BookCard,
},
data: () => ({
dialog: false,
}),
computed: {
sortedArray() {
return this.volumes.sort((a, b) => (a.number > b.number ? -1 : 1));
},
newestVols() {
return ["test"];
},
},
};
</script>
<style>
.icon {
font-size: 30px !important;
opacity: 1 !important;
}
.full-width {
width: 100%;
}
.pointer {
cursor: pointer;
}
.info-icon i {
animation: pulse 2s ease-out infinite;
border-radius: 50% !important;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0px rgb(255, 0, 0, 1), 0 0 0 0px rgba(255, 44, 44, 0.85);
}
100% {
box-shadow: 0 0 0 15px rgba(255, 0, 0, 0), 0 0 0 30px rgba(255, 44, 44, 0);
}
}
</style>