求助：Quasar Vue.js3卡片3D翻转动画实现问题

问题核心 #

点击卡片后仅出现Y轴镜像效果，无3D翻转动画，且未显示背面内容。

问题原因 #

1. 点击事件目标错误：原代码中@click="e => e.target.classList.toggle('flip')"的e.target会指向点击到的内部元素（如q-img），而非外层的.card容器，导致flip类被错误添加到子元素上，无法触发卡片整体翻转。
2. 未遵循Vue响应式开发规范：直接操作DOM类名容易引发元素识别错误，不符合Vue的状态管理逻辑。

修复步骤与代码实现 #

1. 模板部分修改 #

改用Vue响应式状态绑定卡片类名，确保flip类正确作用于.card容器：

<template>
  <q-page class="page bg-brown-2 flex flex-center">
    <div class="canvas flex flex-center flex-wrap">
      <div v-for="(i,index) in numbers" :key="index" class="container">
        <div 
          @click="toggleFlip(index)" 
          class="card"
          :class="{ flip: isFlipped[index] }"
        >
          <div class="front">
            <q-img :src="require('../assets/question_mark.png')"/>
          </div>
          <div class="back">
            <q-img :src="require('../assets/pictures/' + i + '.png')"/>
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

2. 脚本部分修改 #

添加响应式状态数组管理每个卡片的翻转状态，实现点击切换逻辑：

<script>
export default {
  name: 'BigPicturePage',

  data() {
    return {
      numbers: [359,358,357,356,355,354,353,352,351,350,349,348,347,346,345,344,343,342,341,340,339,338,337,336,335,334,333,332,331,330,329,328,327,326,325,324,323,322,321,320,319,318,317,316,315,314,313,312,311,310,309,308,307,306,305,304,303,302,301,300,299,298,297,296,295,294,293,292,291,290,289,288,287,286,285,284,283,282,281,280,279,278,277,276,275,274,273,272,271,270,269,268,267,266,265,264,263,262,261,260,259,258,257,256,255,254,253,252,251,250,249,248,247,246,245,244,243,242,241,240,239,238,237,236,235,234,233,232,231,230,229,228,227,226,225,224,223,222,221,220,219,218,217,216,215,214,213,212,211,210,209,208,207,206,205,204,203,202,201,200,199,198,197,196,195,194,193,192,191,190,189,188,187,186,185,184,183,182,181,180,179,178,177,176,175,174,173,172,171,170,169,168,167,166,165,164,163,162,161,160,159,158,157,156,155,154,153,152,151,150,149,148,147,146,145,144,143,142,141,140,139,138,137,136,135,134,133,132,131,130,129,128,127,126,125,124,123,122,121,120,119,118,117,116,115,114,113,112,111,110,109,108,107,106,105,104,103,102,101,100,99,98,97,96,95,94,93,92,91,90,89,88,87,86,85,84,83,82,81,80,79,78,77,76,75,74,73,72,71,70,69,68,67,66,65,64,63,62,61,60,59,58,57,56,55,54,53,52,51,50,49,48,47,46,45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0],
      isFlipped: Array(360).fill(false)
    }
  },

  methods: {
    toggleFlip(index) {
      this.isFlipped.splice(index, 1, !this.isFlipped[index])
    }
  }
}
</script>

3. 样式部分优化 #

确保图片填满卡片区域，提升交互体验：

<style>
.canvas {
  height: 77.5vh;
  width: 70%;
}

.container {
  width: calc(100%/24);
  height: calc(100%/15);
  perspective: 500px;
}

.card {
  position: relative;
  height: 100%;
  width: 100%;
  transition: transform 1500ms;
  transform-style: preserve-3d;
  cursor: pointer;
}

.front, .back {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.front q-img, .back q-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.back {
  transform: rotateY(180deg);
}

.flip {
  transform: rotateY(180deg);
}
</style>

关键说明 #

• 用Vue响应式状态管理卡片翻转状态，彻底避免DOM操作引发的元素识别问题，符合Vue开发规范。
• .container的perspective属性提供3D透视空间，确保翻转动画呈现真实的立体效果。
• backface-visibility: hidden配合rotateY(180deg)，实现正反面的交替显示逻辑。

内容的提问来源于stack exchange，提问作者Psynformatrix