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）可根据需求调整。
