VueJS CSS 动画未扩展到 v-card/v-col 之外

Question

我目前正在尝试建立一个图书收藏，并尝试制作带有圆形展开动画的通知图标。我将 Vue 3 与 Vuetify 结合使用，并在带有行/列的网格中放置多张卡片。

我当前的问题是，动画在到达卡片/列边界时会中断。 所以我希望动画能够超越边界。

<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>

Answer 1

您必须避开 VCard 和 VImg 上的

overflow: hidden

规则。一种方法是通过 Vuetify 的

overflow-visible

类：

  <v-card class="rounded-0 test overflow-visible" width="300px">
    <v-img
      :src="img"
      gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.8)"
      cover
      class="overflow-visible"
    >
      ...

看看游乐场