vue实现卡片翻转

Vue 实现卡片翻转效果

卡片翻转是一种常见的交互效果，可以通过 CSS 3D 变换和 Vue 的过渡系统实现。以下是实现卡片翻转的几种方法。

使用 CSS 和 Vue Transition

通过 Vue 的 <transition> 组件结合 CSS 的 transform 属性实现翻转效果。

<template>
  <div class="flip-card" @click="isFlipped = !isFlipped">
    <transition name="flip">
      <div class="flip-card-inner" v-if="!isFlipped" key="front">
        <div class="flip-card-front">
          Front Content
        </div>
      </div>
      <div class="flip-card-inner" v-else key="back">
        <div class="flip-card-back">
          Back Content
        </div>
      </div>
    </transition>
  </div>
</template>

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

<style>
.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;
}

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

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

.flip-enter-active, .flip-leave-active {
  transition: all 0.6s;
}

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

使用纯 CSS 控制翻转

通过动态绑定类名实现翻转效果，无需使用 Vue Transition。

<template>
  <div class="flip-card" @click="isFlipped = !isFlipped">
    <div class="flip-card-inner" :class="{ 'flipped': isFlipped }">
      <div class="flip-card-front">
        Front Content
      </div>
      <div class="flip-card-back">
        Back Content
      </div>
    </div>
  </div>
</template>

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

<style>
.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;
}

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

.flip-card-back {
  background-color: #e0e0e0;
  transform: rotateY(180deg);
}
</style>

使用第三方库（如 Vue Flip）

对于更复杂的翻转效果，可以使用第三方库如 vue-flip。

安装依赖：

npm install vue-flip

使用示例：

<template>
  <flip>
    <div v-if="!isFlipped" key="front" class="flip-card-front">
      Front Content
    </div>
    <div v-else key="back" class="flip-card-back">
      Back Content
    </div>
  </flip>
</template>

<script>
import Flip from 'vue-flip';

export default {
  components: { Flip },
  data() {
    return {
      isFlipped: false
    };
  }
};
</script>

<style>
.flip-card-front, .flip-card-back {
  width: 200px;
  height: 300px;
  backface-visibility: hidden;
}

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

.flip-card-back {
  background-color: #e0e0e0;
}
</style>

实现水平或垂直翻转

通过修改 CSS 的 rotateY 或 rotateX 实现不同方向的翻转。

/* 水平翻转 */
.flip-card-inner.flipped {
  transform: rotateY(180deg);
}

/* 垂直翻转 */
.flip-card-inner.flipped {
  transform: rotateX(180deg);
}

注意事项

• perspective 属性为父容器设置 3D 空间视角。
• transform-style: preserve-3d 确保子元素在 3D 空间内变换。
• backface-visibility: hidden 隐藏背面内容。
• 翻转动画的过渡时间（transition）可根据需求调整。