From 0adec758dd474f6922d954df0a1c954f03237419 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 25 Jun 2026 10:14:44 -0400
Subject: [PATCH] CASH-2880 | Add in selected date change animation

---
 src/layouts/scheduling/scheduling.vue | 68 ++++++++++++++++++---------
 1 file changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index 41512f411..b23312331 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -20,29 +20,35 @@
                         :availableDates="availableDates"
                         :isLoadingDates="isLoadingDates"
                         @requestMoreDates="handleRequestMoreDates" />
-                    <mobileSchedulingCard
-                        v-if="showMobileSchedulingCard"
-                        class="mt-4"
-                        v-model="selectedScheduling"
-                        :providerNumber="mobileProviderAndTimeSlot.providerNumber"
-                        :timeSlots="mobileTimeSlotsForSelectedDate"
-                        :premiumTimeSlotPrice="premiumTimeSlotPrice"
-                        :zipCode="serviceZipCode"
-                        :showFreeFlag="showMobileFreeFlag"
-                        :radioGroupName="schedulingRadioGroupName"
-                        :isLoading="isLoadingDates"
-                        @zip-code-clicked="onMobileZipCodeClicked" />
-                    <inshopSchedulingCard
-                        v-for="{ provider } in inShopProvidersAndTimeslots"
-                        v-show="showInshopSchedulingCards"
-                        :key="provider.providerNumber"
-                        class="mt-4"
-                        v-model="selectedScheduling"
-                        :provider="provider"
-                        :timeSlots="getInshopTimeSlotsForSelectedDate(provider.providerNumber)"
-                        :radioGroupName="schedulingRadioGroupName"
-                        :isLoading="isLoadingDates"
-                        @address-clicked="onInshopAddressClicked(provider)" />
+                    <Transition name="card-slide" mode="out-in">
+                        <div :key="selectedDate">
+                            <mobileSchedulingCard
+                                v-if="showMobileSchedulingCard"
+                                class="mt-4"
+                                v-model="selectedScheduling"
+                                :providerNumber="mobileProviderAndTimeSlot.providerNumber"
+                                :timeSlots="mobileTimeSlotsForSelectedDate"
+                                :premiumTimeSlotPrice="premiumTimeSlotPrice"
+                                :zipCode="serviceZipCode"
+                                :showFreeFlag="showMobileFreeFlag"
+                                :radioGroupName="schedulingRadioGroupName"
+                                :isLoading="isLoadingDates"
+                                @zip-code-clicked="onMobileZipCodeClicked" />
+                            <inshopSchedulingCard
+                                v-for="{ provider } in inShopProvidersAndTimeslots"
+                                v-show="showInshopSchedulingCards"
+                                :key="provider.providerNumber"
+                                class="mt-4"
+                                v-model="selectedScheduling"
+                                :provider="provider"
+                                :timeSlots="
+                                    getInshopTimeSlotsForSelectedDate(provider.providerNumber)
+                                "
+                                :radioGroupName="schedulingRadioGroupName"
+                                :isLoading="isLoadingDates"
+                                @address-clicked="onInshopAddressClicked(provider)" />
+                        </div>
+                    </Transition>
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -404,4 +410,20 @@ h5 {
     line-height: 32px;
     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>