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>
1
2
3
4
5
6
7
8
9

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

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

    //背面牌角度
    .back {
      transform: rotateY(180deg);
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12

总结

源代码下载地址