zfc/bindbox-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复了无限开奖动画的问题

Browse Source
This commit is contained in:
tsui110 2025-12-23 14:04:33 +08:00
parent 5b286d7e8a
commit 321189a3fe
2 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/FlipGrid.vue
View File

@ -110,7 +110,8 @@ defineExpose({ revealResults, reset })
}
.flip-card {
perspective: 1000px;
perspective: 1200px;
transform: translateZ(0);
}
.flip-inner {
@ -118,11 +119,18 @@ defineExpose({ revealResults, reset })
width: 100%;
height: 220rpx;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.flip-card.flipped .flip-inner {
transform: rotateY(180deg);
animation: flip-reveal 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.flip-card.flipped {
animation: flip-pop 0.35s ease-out;
}
.flip-front, .flip-back {
@ -130,6 +138,7 @@ defineExpose({ revealResults, reset })
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: $radius-md;
overflow: hidden;
}
@ -155,6 +164,19 @@ defineExpose({ revealResults, reset })
50% { opacity: 1; transform: scale(1.05); }
}
@keyframes flip-pop {
0% { transform: translateZ(0) scale(1); }
60% { transform: translateZ(0) scale(1.06); }
100% { transform: translateZ(0) scale(1); }
}
@keyframes flip-reveal {
0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1); }
35% { transform: rotateY(120deg) rotateX(14deg) rotateZ(-6deg) scale(1.08); }
70% { transform: rotateY(210deg) rotateX(-10deg) rotateZ(4deg) scale(1.02); }
100% { transform: rotateY(180deg) rotateX(0deg) rotateZ(0deg) scale(1); }
}
.flip-back {
background: $bg-card;
transform: rotateY(180deg);

6
pages/activity/wuxianshang/index.vue
View File

@ -1220,12 +1220,16 @@ function closeFlip() { showFlip.value = false }
flex-direction: column;
height: 100%;
padding: 24rpx;
width: 100%;
box-sizing: border-box;
z-index: 2;
justify-content: center;
align-items: center;
align-items: stretch;
overflow-y: auto;
animation: zoomIn 0.3s $ease-bounce;
}
.overlay-close {
align-self: center;
margin-top: 60rpx;
width: 240rpx;
height: 88rpx;