jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-2880 | Add in selected date change animation

Browse source
This commit is contained in:
scottkiener-at-safelite 2026-06-25 10:14:44 -04:00
parent d9b8c0906e
commit 0adec758dd
1 changed files with 45 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/layouts/scheduling/scheduling.vue
View file

@ -20,29 +20,35 @@
:availableDates="availableDates" :availableDates="availableDates"
:isLoadingDates="isLoadingDates" :isLoadingDates="isLoadingDates"
@requestMoreDates="handleRequestMoreDates" /> @requestMoreDates="handleRequestMoreDates" />
<mobileSchedulingCard <Transition name="card-slide" mode="out-in">
v-if="showMobileSchedulingCard" <div :key="selectedDate">
class="mt-4" <mobileSchedulingCard
v-model="selectedScheduling" v-if="showMobileSchedulingCard"
:providerNumber="mobileProviderAndTimeSlot.providerNumber" class="mt-4"
:timeSlots="mobileTimeSlotsForSelectedDate" v-model="selectedScheduling"
:premiumTimeSlotPrice="premiumTimeSlotPrice" :providerNumber="mobileProviderAndTimeSlot.providerNumber"
:zipCode="serviceZipCode" :timeSlots="mobileTimeSlotsForSelectedDate"
:showFreeFlag="showMobileFreeFlag" :premiumTimeSlotPrice="premiumTimeSlotPrice"
:radioGroupName="schedulingRadioGroupName" :zipCode="serviceZipCode"
:isLoading="isLoadingDates" :showFreeFlag="showMobileFreeFlag"
@zip-code-clicked="onMobileZipCodeClicked" /> :radioGroupName="schedulingRadioGroupName"
<inshopSchedulingCard :isLoading="isLoadingDates"
v-for="{ provider } in inShopProvidersAndTimeslots" @zip-code-clicked="onMobileZipCodeClicked" />
v-show="showInshopSchedulingCards" <inshopSchedulingCard
:key="provider.providerNumber" v-for="{ provider } in inShopProvidersAndTimeslots"
class="mt-4" v-show="showInshopSchedulingCards"
v-model="selectedScheduling" :key="provider.providerNumber"
:provider="provider" class="mt-4"
:timeSlots="getInshopTimeSlotsForSelectedDate(provider.providerNumber)" v-model="selectedScheduling"
:radioGroupName="schedulingRadioGroupName" :provider="provider"
:isLoading="isLoadingDates" :timeSlots="
@address-clicked="onInshopAddressClicked(provider)" /> getInshopTimeSlotsForSelectedDate(provider.providerNumber)
"
:radioGroupName="schedulingRadioGroupName"
:isLoading="isLoadingDates"
@address-clicked="onInshopAddressClicked(provider)" />
</div>
</Transition>
<navbar <navbar
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
ref="navbar" ref="navbar"
@ -404,4 +410,20 @@ h5 {
line-height: 32px; line-height: 32px;
font-size: 1.25rem; font-size: 1.25rem;
} }
.card-slide-enter-active {
transition:
opacity 0.3s ease-out,
transform 0.3s ease-out;
}
.card-slide-leave-active {
transition: opacity 0.32s ease-in;
}
.card-slide-enter-from {
opacity: 0;
transform: translateX(24px);
}
.card-slide-leave-to {
opacity: 0;
}
</style> </style>