CSR-240 | Fade between page transitions

Two different approaches - PR created for review purposes

src/App.vue

@@ -1,5 +1,9 @@
 <template>
-  <router-view></router-view>
+  <router-view v-slot="{ Component }">
+    <transition :duration="{ enter: 800, leave: 300 }" name="route-fade" mode="out-in">
+      <component :is="Component" />
+    </transition>
+  </router-view>
 </template>
 
 <style lang="scss">

src/layouts/vehicle-make/make-question/make-question.vue

@@ -1,6 +1,7 @@
 <template>
   <buttonQuestion
-    class="radioQuestion"
+    class="radioQuestion" 
+    :class="{'fade-on-route-transition': this.fadeOnRouteTransition}"
     isOverflowScrollable
     selectingInitiatesLoad
     :questionText="questionText"
@@ -29,6 +30,7 @@ export default {
   props: {
     modelValue: String,
     cmsWidgetName: String,
+    fadeOnRouteTransition: Boolean,
   },
   computed: {
     questionText(){

src/layouts/vehicle-make/vehicle-make.vue

@@ -10,7 +10,7 @@
             backButtonAccessibleText="Change Vehicle Year"
             @click-event="backButtonAction"
         />
-        <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
+        <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" fadeOnRouteTransition />
       </div>
     </div>
   </div>

src/layouts/vehicle-year/vehicle-year.vue

@@ -5,7 +5,12 @@
       <div class="select-car-form rounded text-center">
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-        <yearQuestion v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
+        <yearQuestion 
+          class="fade-on-route-transition"
+          v-model="selectedYear" 
+          ref="yearQuestion" 
+          cmsWidgetName="VehicleYearQuestion" 
+        />
       </div>
     </div>
   </div>

src/styles/common-animations.scss

@@ -9,4 +9,22 @@
 .fade-enter-from,
 .fade-leave-to {
     opacity: 0;
+}
+
+.route-fade-enter-active .fade-on-route-transition {
+    transition: opacity 0.8s ease;
+}
+
+.route-fade-leave-active .fade-on-route-transition {
+    transition: opacity 0.3s ease; 
+}
+
+.route-fade-enter-from .fade-on-route-transition,
+.route-fade-leave-to .fade-on-route-transition {
+    /*
+  	Hack around a Chrome 96 bug in handling nested opacity transitions.
+    This is not needed in other browsers or Chrome 99+ where the bug
+    has been fixed.
+  */
+    opacity: 0.001;
 }