ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(player-desktop): 为右侧投注单卡片列表添加平滑切入和移除动画

Browse Source
This commit is contained in:
Mars
2026-06-30 17:58:34 +08:00
parent 544013c25b
commit f8501873dd
1 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/player/src/components/desktop/BetSlipPanel.vue
View File

@@ -979,8 +979,8 @@ onUnmounted(() => {
<p>{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}</p> <p>{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}</p>
</div> </div>
<div v-else class="items-list"> <TransitionGroup v-else name="list-slide" tag="div" class="items-list">
<p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning">{{ parlayWarning }}</p> <p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning" key="warning">{{ parlayWarning }}</p>
<div <div
v-for="item in activeItems" v-for="item in activeItems"
:key="item.selectionId" :key="item.selectionId"
@@ -1079,11 +1079,11 @@ onUnmounted(() => {
</div> </div>
</div> </div>
</div> </div>
<div v-if="activeTab === 'parlay' && slip.parlayItems.length" class="parlay-summary"> <div v-if="activeTab === 'parlay' && slip.parlayItems.length" class="parlay-summary" key="summary">
<span>{{ t('bet.slip_parlay_count', { n: slip.parlayItems.length }) }}</span> <span>{{ t('bet.slip_parlay_count', { n: slip.parlayItems.length }) }}</span>
<span class="parlay-odds">{{ t('bet.slip_parlay_odds', { odds: totalOddsText }) }}</span> <span class="parlay-odds">{{ t('bet.slip_parlay_odds', { odds: totalOddsText }) }}</span>
</div> </div>
</div> </TransitionGroup>
<!-- Stake input (parlay only) --> <!-- Stake input (parlay only) -->
<div v-if="activeTab === 'parlay' && activeItems.length" class="stake-control"> <div v-if="activeTab === 'parlay' && activeItems.length" class="stake-control">
@@ -1992,4 +1992,25 @@ onUnmounted(() => {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
/* Transition group list animation */
.list-slide-enter-active,
.list-slide-leave-active {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.list-slide-enter-from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
.list-slide-leave-to {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
/* Ensure smooth moving when list changes */
.list-slide-move {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
</style> </style>