当前位置：首页 > VUE

vue实现翻牌子效果

2026-01-22 11:07:13VUE

Vue 实现翻牌子效果

翻牌子效果通常指卡片翻转的交互，可以通过 CSS 3D 变换和 Vue 的状态管理实现。以下是具体实现方法：

基础实现思路

HTML 结构
使用 Vue 的模板语法创建卡片容器，包含正面和背面两个元素：

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

CSS 样式
通过 CSS 实现 3D 翻转效果：

.card-container {
  perspective: 1000px;
  width: 200px;
  height: 300px;
}
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.card-front {
  background: #4CAF50;
}
.card-back {
  background: #FF5722;
  transform: rotateY(180deg);
}
.is-flipped {
  transform: rotateY(180deg);
}

Vue 逻辑
使用 Vue 的 data 和 methods 控制翻转状态：

<script>
export default {
  data() {
    return {
      isFlipped: false
    };
  },
  methods: {
    flipCard() {
      this.isFlipped = !this.isFlipped;
    }
  }
};
</script>

进阶实现（动态内容）

若需动态加载卡片内容，可通过 props 或 v-for 实现：

动态数据绑定

<template>
  <div class="card-container" v-for="(card, index) in cards" :key="index" @click="flipCard(index)">
    <div class="card" :class="{ 'is-flipped': card.isFlipped }">
      <div class="card-face card-front">{{ card.frontText }}</div>
      <div class="card-face card-back">{{ card.backText }}</div>
    </div>
  </div>
</template>

数据与逻辑

<script>
export default {
  data() {
    return {
      cards: [
        { frontText: '问题1', backText: '答案1', isFlipped: false },
        { frontText: '问题2', backText: '答案2', isFlipped: false }
      ]
    };
  },
  methods: {
    flipCard(index) {
      this.cards[index].isFlipped = !this.cards[index].isFlipped;
    }
  }
};
</script>

优化交互（自动回翻）

通过 setTimeout 实现翻转后自动恢复：

methods: {
  flipCard(index) {
    this.cards[index].isFlipped = true;
    setTimeout(() => {
      this.cards[index].isFlipped = false;
    }, 2000); // 2秒后回翻
  }
}