一、效果图
二、说明
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