前言
最近重刷诡秘之主,感觉里面的塔罗牌挺有意思,于是做了一个简单的塔罗牌翻牌动画(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;//过渡样式,3d
transition: 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);
}
}
总结
源代码下载地址