vue实现翻牌效果

实现翻牌效果的基本思路

翻牌效果通常指卡片正面和背面通过动画翻转切换。Vue中可通过CSS过渡和动态绑定实现这一交互效果。

使用CSS过渡和Vue数据绑定

定义卡片容器和正反面内容，通过v-bind:class控制翻转状态：

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

<script>
export default {
  data() {
    return {
      isFlipped: false
    }
  }
}
</script>

添加CSS样式

关键样式包括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-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.flip-card-front {
  background-color: #f8f9fa;
}

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

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

进阶实现：动态内容传递

通过props传递正反面内容使组件更通用：

<template>
  <div class="flip-card" @click="toggleFlip">
    <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>
export default {
  props: {
    frontText: String,
    backText: String
  },
  data() {
    return {
      isFlipped: false
    }
  },
  methods: {
    toggleFlip() {
      this.isFlipped = !this.isFlipped
    }
  }
}
</script>

性能优化建议

对于移动端设备，考虑添加will-change属性优化渲染性能：

.flip-card-inner {
  will-change: transform;
}

如需支持旧版浏览器，可添加前缀：

.flip-card-inner {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}