CSR-886: animate new months to fade in

src/digital-components/date-picker/date-picker.vue

@@ -3,13 +3,15 @@
         <fieldset v-if="months">
             <legend class="sr-only">Date Picker</legend>
             <div
-            class="test-div"
-            :class="[isActive ? '' : 'active']"
                 v-for="month in months"
                 :key="`${month.monthLabel}-${month.yearNum.toString()}-${months.length}`">
                 <div
-            class="calendar-grid-container"
+                    class="calendar-grid-container position-relative"
-            :class="[isInitialView === true ? 'initial-view' : '', month.monthClass, isAddingNewMonth === true ? 'is-adding-new-month' : '']">
+                    :class="[
+                        isInitialView === true ? 'initial-view' : '',
+                        month.monthClass,
+                        isAddingNewMonth === true ? 'is-adding-new-month' : '',
+                    ]">
                     <div class="month-year body-small d-flex align-items-center ps-3 small">
                         {{ month.monthLabel }} {{ month.yearNum.toString() }}
                     </div>
@@ -50,13 +52,14 @@
                 </div>
             </div>
         </fieldset>
-
     </div>
     <button
         v-if="calendarViewDirection === 'future'"
         type="button"
         class="btn-link"
-@click="goForward(); toggleClass()">
+        @click="
+            goForward();
+        ">
         View more dates
     </button>
 </template>
@@ -74,7 +77,6 @@ export default {
     name: "datePicker",
     data() {
         return {
-            isActive: false,
             calendarData: [],
             monthsBeforeToLoadOffset: 0,
             monthsAfterToLoadOffset: 1,
@@ -135,9 +137,6 @@ export default {
         },
     },
     methods: {
-        toggleClass: function (event) {
-            this.isActive = !this.isActive;
-        },
         goForward() {
             if (this.isInitialView) {
                 this.isInitialView = false; // 1st click removes hidden styling
@@ -280,8 +279,7 @@ export default {
                     }
                 }
             } else {
-                debugger; // eslint-disable-line no-debugger
+                monthClass = monthClass + " new-month";
-                monthClass = monthClass + ' new-month';
             }
 
             if (this.selectableDates === "custom") {
@@ -346,26 +344,23 @@ export default {
             return monthToAdd;
         },
         addMonthData() {
-            //this.isAddingNewMonth = true;
+            this.isAddingNewMonth = true;
-            const oldMonth = document.querySelector(".new-month");
+
-            oldMonth?.classList.remove("new-month");
-            debugger; // eslint-disable-line no-debugger
             const monthToAdd = this.getMonthData();
             if (this.calendarViewDirection === "future") {
+                let month = this.calendarData[this.calendarData.length - 1];
+                month.monthClass = month.monthClass.replace("new-month", "");
                 this.calendarData.push(monthToAdd);
             }
             if (this.calendarViewDirection === "past") {
+                let month = this.calendarData[0];
+                month.monthClass = month.monthClass.replace("new-month", "");
                 this.calendarData.unshift(monthToAdd);
             }
-            let newMonth;
+
-            this.$nextTick(() => {
-                debugger; // eslint-disable-line no-debugger
-                newMonth = document.querySelector(".new-month");
-                newMonth.classList.add("is-adding-new-month");
-            });
             setTimeout(() => {
-                newMonth.classList.remove("is-adding-new-month");
+                this.isAddingNewMonth = false;
-            }, .025);
+            }, 0.010);
         },
         isSelectableDate(thisDate) {
             const testForDate = (dateInArray) => {
@@ -397,14 +392,16 @@ export default {
 <style lang="scss" scoped>
 .date-picker {
     .calendar-grid-container {
-        margin: 0 auto;
+        margin: 4px auto;
         max-width: 414px;
         max-height: 500px;
+        overflow: hidden;
+        transition: all ease 1s;
         display: grid;
         grid-template-columns: repeat(7, 1fr);
         justify-content: center;
         align-items: center;
-        padding: 4px;
+        padding: 0;
 
         .grid-item {
             text-align: center;
@@ -439,6 +436,14 @@ export default {
             text-transform: uppercase;
             font-weight: 300;
             letter-spacing: 0.75px;
+
+            &:after {
+                content: '';
+                position: absolute;
+                width: 100%;
+                margin: 6rem 0 4.2rem 0;
+                border-bottom: 1px solid $gray-300;
+            }
         }
         .legend {
             grid-area: 1 / 5 / 2 / 8;
@@ -610,8 +615,6 @@ export default {
         &.is-adding-new-month {
             &.new-month {
                 max-height: 0;
-                overflow: hidden;
-                transition: all ease 2s;
             }
         }
     }
@@ -677,9 +680,7 @@ export default {
         margin-top: 2rem;
     }
     .new-month {
-        max-height: 500px;
+        max-height: 550px;
-        overflow: hidden;
-        transition: all ease 10s;
     }
 }
 </style>

src/layouts/demo-date-picker/demo-date-picker.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="page-container-grouped-styles">
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-        <div class="select-car">
+        <div class="">
-            <div class="select-car-form rounded text-center">
+            <div class="rounded text-center">
                 <div class="fade-on-route-transition">
                     <date-picker
                         selectableDates="custom"