feat(player-desktop): 为右侧投注单卡片列表添加平滑切入和移除动画
This commit is contained in:
@@ -979,8 +979,8 @@ onUnmounted(() => {
|
||||
<p>{{ activeTab === 'parlay' ? t('bet.slip_parlay_empty_hint') : t('bet.slip_empty_hint') }}</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="items-list">
|
||||
<p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning">{{ parlayWarning }}</p>
|
||||
<TransitionGroup v-else name="list-slide" tag="div" class="items-list">
|
||||
<p v-if="activeTab === 'parlay' && parlayWarning" class="panel-warning" key="warning">{{ parlayWarning }}</p>
|
||||
<div
|
||||
v-for="item in activeItems"
|
||||
:key="item.selectionId"
|
||||
@@ -1079,11 +1079,11 @@ onUnmounted(() => {
|
||||
</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 class="parlay-odds">{{ t('bet.slip_parlay_odds', { odds: totalOddsText }) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
|
||||
<!-- Stake input (parlay only) -->
|
||||
<div v-if="activeTab === 'parlay' && activeItems.length" class="stake-control">
|
||||
@@ -1992,4 +1992,25 @@ onUnmounted(() => {
|
||||
opacity: 0.5;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user