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

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

原理

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

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

// 初始化卡片列表
    init() {
   
      // 添加控制是否翻牌属性
      this.cardsList = this.dataList.map((item) => {
   
        return {
    ...item, isTurned: false };
      });
    },

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

翻转

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

动画一：

完整代码

<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</