如何实现vue翻牌子
Vue 翻牌效果实现
翻牌效果通常指卡片正面和背面内容不同，点击后翻转显示另一面。以下是基于 Vue 3 的实现方法：
使用 CSS 3D 变换
创建两个面（正面/背面）的卡片结构，通过 CSS 控制翻转动画：
<template>
<div class="flip-container" @click="isFlipped = !isFlipped">
<div class="flipper" :class="{ flipped: isFlipped }">
<div class="front">
<!-- 正面内容 -->
<p>点击翻转</p>
</div>
<div class="back">
<!-- 背面内容 -->
<p>背面内容</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const isFlipped = ref(false);
</script>
<style scoped>
.flip-container {
perspective: 1000px;
width: 200px;
height: 200px;
}
.flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
border-radius: 8px;
}
.back {
transform: rotateY(180deg);
background-color: #f0f0f0;
}
.flipped {
transform: rotateY(180deg);
}
</style>使用第三方库
对于更复杂的效果，可考虑使用动画库如 vue-flip：
npm install vue-flip示例用法：
<template>
<Flip>
<div v-if="isFlipped" key="back">背面内容</div>
<div v-else key="front">正面内容</div>
</Flip>
<button @click="isFlipped = !isFlipped">翻转</button>
</template>
<script setup>
import { ref } from 'vue';
import { Flip } from 'vue-flip';
const isFlipped = ref(false);
</script>注意事项
- 确保容器设置了
perspective属性以获得 3D 效果 - 使用
transform-style: preserve-3d保持 3D 变换层次 - 添加
backface-visibility: hidden避免背面内容镜像显示 - 考虑添加
will-change: transform优化动画性能 - 移动端可添加触摸事件支持
