动画效果:实现卡片翻转抽奖动画(正反面内容不一样)
原理
根据不同条件动态添加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: 6, content: "未中奖" },