mpvue小程序实现翻牌抽奖

一、效果图

二、说明

1.主要是用css来实现动画效果

2.使用给数组生成随机数，然后利用随机数来打乱数组排序的方式洗牌 

三、 代码

<template>
  <div class="page">
    <div class="gridcard">
      <div v-for = "(item, idx) in card" :key="idx"  class="gridcard_item" :class="{back:item.isBack,move:item.isMove}" :data-idx="idx"  @click = "onClick" >
        <div>
          <div class="gridcard_front">
            <img src = "/static/card/card_front.png"/>
          </div>
          <div class="gridcard_back">
            <div class="award">{
  {item.award}}</div>
          </div>
        </div>
      </div>
    </div>
    <button @click="onStart" class="on-start">开始</button>
  </div>
</template>

<script>
  function runAsync (time) {
    return new Promise(function (resolve, reject) {
      const timer = setTimeout(function () {
        resolve()
        clearTimeout(timer)
      }, time)
    })
  }
  export default {
    runAsync,
    data () {
      return {
        count: 0,
        isFlip: false ,
        card: [
          { inlineStyle: '', isBack: false, isMove: false, award: '一等奖' },
          { inlineStyle: '', isBack: false, isMove: false, award: '二等奖' },
          { inlineStyle: '', isBack: false, isMove: false, award: '三等奖' },
          { inlineStyle: '', isBac