动画效果：实现卡片翻转抽奖动画（正反面内容不一样）

动画效果：实现卡片翻转抽奖动画（正反面内容不一样）

原理

根据不同条件动态添加class类实现动画效果

首先，为卡片列表添加一个是否翻转的元素 isTurned

// 初始化卡片列表
    init() {
   
      // 添加控制是否翻牌属性
      this.cardsList = this.dataList.map((item) => {
   
        return {
    ...item, isTurned: false };
      });
    },
1
2
3
4
5
6
7
8
9
10

分别设置正反两面的样式及内容

翻转

transform: perspective(800px) rotateY(0.5turn);
1

动画一：

完整代码

<template>
  <div class="app-container">
    <div class="luckDraw">
      <div class="btn" @click="resetFlop">重新翻牌div>
      <div class="card-box">
        <div
          v-for="item in cardsList"
          :key="item.id"
          @click="handelFlop(item)"
          class="card"
          :class="{
            flip: item.isTurned,
            'other-flip': !item.isTurned && isGame,
          }"
        >
          <div
            :class="{ back: isBack || item.isTurned }"
            v-if="isBack || item.isTurned"
          >
            <span>{
  { item.content }}span>
          div>
          <div v-else class="front-content">点击翻牌div>
        div>
      div>
    div>
  div>
template>

<script>
export default {
     
  data() {
     
    return {
     
      // 模拟获取数据，没有控制是否翻牌属性
      dataList: [
        {
      id: 0, content: "未中奖" },
        {
      id: 1, content: "未中奖" },
        {
      id: 2, content: "未中奖" },
        {
      id: 3, content: "未中奖" },
        {
      id: 4, content: "未中奖" },
        {
      id: 5, content: "未中奖" },
        {
      id: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51