如何实现vue翻牌子

Vue 翻牌效果实现

翻牌效果通常指卡片正面和背面内容不同，点击后翻转显示另一面。以下是基于 Vue 3 的实现方法：

使用 CSS 3D 变换

创建两个面（正面/背面）的卡片结构，通过 CSS 控制翻转动画：

<template>
  <div class="flip-container" @click="isFlipped = !isFlipped">
    <div class="flipper" :class="{ flipped: isFlipped }">
      <div class="front">
        <!-- 正面内容 -->
        <p>点击翻转</p>
      </div>
      <div class="back">
        <!-- 背面内容 -->
        <p>背面内容</p>
      </div>
    </div>
  </div>
</template>

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

<style scoped>
.flip-container {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

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

.front, .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;
}

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

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

使用第三方库

对于更复杂的效果，可考虑使用动画库如 vue-flip：

npm install vue-flip

示例用法：

<template>
  <Flip>
    <div v-if="isFlipped" key="back">背面内容</div>
    <div v-else key="front">正面内容</div>
  </Flip>
  <button @click="isFlipped = !isFlipped">翻转</button>
</template>

<script setup>
import { ref } from 'vue';
import { Flip } from 'vue-flip';
const isFlipped = ref(false);
</script>

注意事项

• 确保容器设置了 perspective 属性以获得 3D 效果
• 使用 transform-style: preserve-3d 保持 3D 变换层次
• 添加 backface-visibility: hidden 避免背面内容镜像显示
• 考虑添加 will-change: transform 优化动画性能
• 移动端可添加触摸事件支持