场景描述：
打开抽卡界面，卡牌出现并发牌至固定的位置，此时展示的是卡牌的背面；用户点击卡牌时，卡牌进行翻转，并展示卡牌内容，或者发牌后自动进行翻转和展示。
本实例在页面挂载后自动播放动画，若需点击后再播放，只需将事件写入click事件当中即可
卡牌样式可根据具体需求设置
实现思路：
html结构：
动态设置class属性，即可实现动态的css样式及动画
<template>
<div class="cardContent">
<div class="cardBox">
<div
:class="['card-item', `card-item-${index + 1}`]"
v-for="(item, index) in drawList"
:key="index"
>
<!-- 数组中存入index值时，将写有动画的class属性赋给标签，即开始播放动画 -->
<div
:class="['card', selectArr.includes(index) ? 'cardAnimate' : '']"
>卡牌背面</div>
<div
:class="['contxt', selectArr.includes(index) ? 'contxtAnimate' : '']"
>卡牌{ {index+1}}正面
</div>
</div>
</div>
</div>
</template>
翻牌动画在挂载后自动执行，
//数组中存入index值时，将写有动画的class属性赋给标签，即开始播放动画
//自动播放翻牌动画，1500ms后播放第一张翻牌动画，然后每200ms播放一张
for (let i = 0; i < 6; i++) {
setTimeout(() => {
this.selectArr.push(i);
}, 1500 + (i - 1) * 200);
}
给每个卡牌进行定位，页面加载后执行相应的发牌和翻牌动画，
若翻牌动画欲设置为点击后翻牌，在methods中定义方法，并给包含卡牌正面和反面的标签父元素设置@click事件：@click=rotateCard(index)
methods: {
rotateCard(index) {
this.selectArr.push(index);
},
},
完整代码如下：
<template>
<div class="cardContent">
<div class="cardBox">
<div
:class="['card-item', `card-item-${index + 1}`]"
v-for="(item, index) in drawList"
:key="index"
>
<!-- 数组中存入index值时，将写有动画的class属性赋给标签，即开始播放动画 -->
<div
:class="['card', selectArr.includes(index) ? 'cardAnimate' : '']"
>卡牌背面</div>
<div
:class="['contxt', selectArr.includes(index) ? 'contxtAnimate' : '']"
>卡牌{
{index+1}}正面
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
drawList:5,
selectArr: [],
};
},
mounted() {
//数组中存入index值时，将写有动画的class属性赋给标签，即开始播放动画
//自动播放翻牌动画，1500ms后播放第一张翻牌动画，然后每200ms播放一张
for (let i = 0; i < 6; i++) {
setTimeout(() => {
this.selectArr.push(i);
}, 1500 + (i - 1) * 200);
}
},
};
</script>
<style>
/* 每张卡牌属性 */
.card-item {
width: 212rpx;
height: 252rpx;
margin: 10rpx;
border-radius: 10px;
/* 文字居中 */
line-height:252rpx;
text-align: center;
}
/* 翻转前 */
.card-item .card {
width: 212rpx;
height: 252rpx;
border-radius: 10px;
backface-visibility: hidden;
background-color: aliceblue;
}
/* 翻转后 */
.card-item .contxt {
width: 212rpx;
height: 252rpx;
border-radius: 10px;
backface-visibility: hidden;
/* 定位于和翻转前相同的位置 */
position: relative;
top: -252rpx;
left: 0;
/* Y轴翻转180°，成卡牌效果*/
transform: rotateY(180deg);
opacity: 0;
background-color: bisque;
}
/*将每个卡牌进行定位*/
.card-item-1 {
position: absolute;
left: 20rpx;
top: 200rpx;
animation: issueCard1 1.5s;
}
.card-item-2 {
position: absolute;
left: 252rpx;
top: 200rpx;
animation: issueCard2 1.5s;
}
.card-item-3 {
position: absolute;
left: 484rpx;
top: 200rpx;
animation: issueCard3 1.5s;
}
.card-item-4 {
position: absolute;
left: 136rpx;
top: 472rpx;
animation: issueCard4 1.5s;
}
.card-item-5 {
position: absolute;
left: 368rpx;
top: 472rpx;
animation: issueCard5 1.5s;
}
/* 卡片翻牌 */
/* 背面 */
.cardAnimate {
animation: rotetaCard 0.5s ease-in;
animation-fill-mode: forwards;
}
/* 正面 */
.contxtAnimate {
animation: contxtRotate 0.5s ease-in;
animation-fill-mode: forwards;
}
/* 正面卡牌翻牌动画 */
@keyframes contxtRotate {
from {
transform: rotateY(180deg);
opacity: 1;
}
to {
transform: rotateY(0deg);
opacity: 1;
}
}
/* 背面卡牌翻牌动画 */
@keyframes rotetaCard {
from {
transform: rotateY(0);
}
to {
transform: rotateY(180deg);
}
}
/* 每张卡牌发牌动画 */
@keyframes issueCard1 {
0% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(0);
}
20% {
transform: scale(1.2);
}
40% {
transform: scale(1);
}
50% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(1);
}
60% {
position: fixed;
left: 20rpx;
top: 200rpx;
}
100% {
}
}
@keyframes issueCard2 {
0% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(0);
}
20% {
transform: scale(1.2);
}
40% {
transform: scale(1);
}
50% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(1);
}
60% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(1);
}
70% {
position: absolute;
left: 252rpx;
top: 200rpx;
}
100% {
}
}
@keyframes issueCard3 {
0% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(0);
}
20% {
transform: scale(1.2);
}
40% {
transform: scale(1);
}
50% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(1);
}
70% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(1);
}
80% {
position: absolute;
left: 484rpx;
top: 200rpx;
}
100% {
}
}
@keyframes issueCard4 {
0% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(0);
}
20% {
transform: scale(1.2);
}
40% {
transform: scale(1);
}
50% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(1);
}
80% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(1);
}
90% {
position: absolute;
left: 136rpx;
top: 472rpx;
}
100% {
}
}
@keyframes issueCard5 {
0% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(0);
}
20% {
transform: scale(1.2);
}
40% {
transform: scale(1);
}
50% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(1);
}
90% {
position: fixed;
top: 750rpx;
left: 269rpx;
transform: scale(1);
}
100% {
position: absolute;
left: 368rpx;
top: 472rpx;
}
}
</style>