vue实现卡片翻转

Vue实现卡片翻转效果

使用Vue实现卡片翻转效果可以通过CSS3的transform和transition属性结合Vue的动态类绑定完成。以下是两种常见实现方式：

使用CSS过渡和Vue数据绑定

通过Vue的v-bind:class动态切换类名触发CSS动画：

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

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

<style>
.card {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s;
  border-radius: 10px;
}

.front {
  background: #3498db;
  transform: rotateY(0deg);
}

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

.flipped .front {
  transform: rotateY(180deg);
}

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

使用Vue Transition组件

利用Vue内置的过渡系统实现更复杂的动画效果：

<template>
  <div class="card-container" @click="flipCard">
    <transition name="flip">
      <div class="card" v-if="!isFlipped" key="front">
        <div class="front">正面内容</div>
      </div>
      <div class="card" v-else key="back">
        <div class="back">背面内容</div>
      </div>
    </transition>
  </div>
</template>

<style>
.flip-enter-active, .flip-leave-active {
  transition: transform 0.5s;
}

.flip-enter, .flip-leave-to {
  transform: rotateY(90deg);
}
</style>

3D效果增强

要增强3D立体感，可添加以下CSS属性：

.card-container {
  perspective: 1000px;
}

.card {
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

性能优化注意事项

避免在大型元素上使用3D变换可能导致的性能问题。硬件加速可通过以下方式启用：

.card {
  will-change: transform;
  backface-visibility: hidden;
}

这两种方法都能实现卡片翻转效果，第一种适合简单场景，第二种适合需要更复杂过渡控制的场景。可根据实际需求选择实现方式。