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 { .flip-card {
perspective: 1000px; perspective: 1200px;
transform: translateZ(0);
} }
.flip-inner { .flip-inner {
@ -118,11 +119,18 @@ defineExpose({ revealResults, reset })
width: 100%; width: 100%;
height: 220rpx; height: 220rpx;
transform-style: preserve-3d; transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
} }
.flip-card.flipped .flip-inner { .flip-card.flipped .flip-inner {
transform: rotateY(180deg); 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 { .flip-front, .flip-back {
@ -130,6 +138,7 @@ defineExpose({ revealResults, reset })
width: 100%; width: 100%;
height: 100%; height: 100%;
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: $radius-md; border-radius: $radius-md;
overflow: hidden; overflow: hidden;
} }
@ -155,6 +164,19 @@ defineExpose({ revealResults, reset })
50% { opacity: 1; transform: scale(1.05); } 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 { .flip-back {
background: $bg-card; background: $bg-card;
transform: rotateY(180deg); transform: rotateY(180deg);

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

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