vue实现折叠翻转卡片

Vue 实现折叠翻转卡片

基本结构

在 Vue 中实现折叠翻转卡片效果，可以通过结合 CSS 过渡和动态类名绑定来实现。以下是一个完整的实现方案。

HTML 模板部分

<template>
  <div class="flip-card" @click="toggleFlip">
    <div class="flip-card-inner" :class="{ 'flipped': isFlipped }">
      <div class="flip-card-front">
        <slot name="front"></slot>
      </div>
      <div class="flip-card-back">
        <slot name="back"></slot>
      </div>
    </div>
  </div>
</template>

JavaScript 逻辑部分

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

CSS 样式部分

<style scoped>
.flip-card {
  perspective: 1000px;
  width: 200px;
  height: 300px;
  cursor: pointer;
}

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

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

使用示例

<FlipCard>
  <template v-slot:front>
    <div>正面内容</div>
  </template>
  <template v-slot:back>
    <div>背面内容</div>
  </template>
</FlipCard>

关键点说明

• perspective：设置透视距离，产生3D效果。
• transform-style: preserve-3d：保持子元素的3D变换。
• backface-visibility: hidden：隐藏背面元素。
• slot：使用具名插槽灵活插入内容。
• toggleFlip：通过点击事件切换翻转状态。

扩展选项

• 可以添加参数控制自动翻转时间。
• 可以通过CSS变量自定义动画时间和翻转方向。
• 可以添加手势支持实现滑动翻转。