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变量自定义动画时间和翻转方向。
- 可以添加手势支持实现滑动翻转。
