当前位置：首页 > VUE

vue实现翻牌效果案例

2026-02-21 09:47:19VUE

Vue 实现翻牌效果案例

翻牌效果常用于卡片翻转、抽奖、记忆游戏等场景。以下是一个基于 Vue 3 的翻牌效果实现方法，结合 CSS 3D 变换和 Vue 的响应式特性。

基础实现

创建 Vue 组件结构 在 Vue 单文件组件中，定义卡片的正反面内容和翻转状态。

<template>
  <div class="flip-card" @click="flipCard">
    <div class="flip-card-inner" :class="{ 'flipped': isFlipped }">
      <div class="flip-card-front">
        <h3>正面内容</h3>
      </div>
      <div class="flip-card-back">
        <h3>背面内容</h3>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const isFlipped = ref(false);
const flipCard = () => {
  isFlipped.value = !isFlipped.value;
};
</script>

添加 CSS 动画样式 通过 CSS 的 transform 和 transition 实现 3D 翻转效果。

.flip-card {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-inner.flipped {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.flip-card-back {
  transform: rotateY(180deg);
  background-color: #f0f0f0;
}

进阶优化

动态内容绑定 通过 props 传递正反面内容，使组件可复用。

<template>
  <div class="flip-card" @click="flipCard">
    <div class="flip-card-inner" :class="{ 'flipped': isFlipped }">
      <div class="flip-card-front">
        <slot name="front">{{ frontText }}</slot>
      </div>
      <div class="flip-card-back">
        <slot name="back">{{ backText }}</slot>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  frontText: String,
  backText: String,
});
</script>

自动翻转控制 添加 autoFlip 属性支持自动翻转，通过 setTimeout 控制。

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  autoFlip: Boolean,
  flipDuration: { type: Number, default: 3000 },
});

watch(() => props.autoFlip, (newVal) => {
  if (newVal) {
    setTimeout(() => {
      isFlipped.value = !isFlipped.value;
    }, props.flipDuration);
  }
});
</script>

性能优化 使用 will-change 提升动画性能，避免频繁重绘。
```
.flip-card-inner {
  will-change: transform;
}
```

实际应用示例

记忆游戏场景 在记忆游戏中，可通过 v-for 渲染多个卡片，并绑定唯一标识符。

<template>
  <div class="game-board">
    <FlipCard
      v-for="card in cards"
      :key="card.id"
      :front-text="card.question"
      :back-text="card.answer"
      @click="handleCardClick(card.id)"
    />
  </div>
</template>

抽奖场景 结合 setInterval 实现连续翻转，模拟抽奖效果。

const startLottery = () => {
  const interval = setInterval(() => {
    flipRandomCard();
  }, 100);
  setTimeout(() => clearInterval(interval), 2000);
};