vue3实现卡片翻牌

前言

最近重刷诡秘之主，感觉里面的塔罗牌挺有意思，于是做了一个简单的塔罗牌翻牌动画（vue3+vite+ts）

一、操作步骤

1.布局

首先我们定义一个整体的塔罗牌盒子，在盒子里放入多张塔罗牌，每张塔罗牌是由背面牌和正面牌组成，我们分别赋予类名front，back；
在单张塔罗牌中我们除了默认的tarotItem样式外，添加了一个动态样式open用于实现切换牌面。

<template><div class="tarotBox"><div class="tarotItem" v-for="item in tarot" @click="changeTarot(item)":class="item.value?'open':''"><img class="back" src="../front.jpg"><img class="front" src="../0.jpg"></div></div>
</template>

2.操作

我们定义一个塔罗牌数据数组，通过其中的属性value对动态类进行控制；再编写一个函数changeTarot用于改变类open的添加和删除

<script setup lang="ts">
import {ref} from "vue";//塔罗牌数据数组
const tarot = ref([{name: '1',value: false
}]);//牌面进行切换
const changeTarot= (item: any) => {item.value = !item.value
}</script>

3.样式

塔罗牌默认样式是背面在上，因此设置正面牌角度为180，背面牌角度为0，同时为两张牌设置过渡样式和过渡属性

//塔罗牌样式
img {width:110px;height: 200px;position: absolute;//确保牌在同一位置transform-style: preserve-3d;//过渡样式，3dtransition: 1s transform;//过渡时间backface-visibility: hidden;//旋转到180度自动隐藏
}
//正面牌角度
.front {transform: rotateY(180deg);
}//背面牌角度
.back {transform: rotateY(0deg);
}
</style>

当点击塔罗牌时，对应位置的塔罗牌样式发生变化，也就是下面我们所添加的样式类open

//翻牌样式.open {//正面牌角度.front {transform: rotateY(0deg);}//背面牌角度.back {transform: rotateY(180deg);}}

总结

源代码下载地址