From ea038adcff702822ef51538a05c1ffdfb1ea4b10 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 25 Feb 2022 08:28:52 -0500
Subject: [PATCH] Added transition effect to appearance of address fields after
 auto-complete

---
 .../address-questions/address-questions.vue   | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index b08887c02..70c5d6e40 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -6,23 +6,25 @@
             </div>
         </div>
     </form>
-    <form>
-        <div v-show="showAddressFields" class="row my-4">
-            <div class="col">
-                <textboxQuestion v-model="city" ref="city" inputId="city" labelText="City" />
-            </div>
+    <transition name="fade" mode="out-in">
+        <div class="side-doors" v-if="showAddressFields" aria-live="polite">
+            <form>
+                <div class="row my-4">
+                    <div class="col">
+                        <textboxQuestion v-model="city" ref="city" inputId="city" labelText="City" />
+                    </div>
+                </div>
+                <div class="row my-4">
+                    <div class="col-6">
+                        <dropdownQuestion v-model="state" ref="state" inputId="state" :options="stateOptions" labelText="State"  />
+                    </div>            
+                    <div class="col-6">
+                        <textboxQuestion v-model="zip" ref="zip" inputId="zip" labelText="Zip" />
+                    </div>      
+                </div> 
+            </form>
         </div>
-    </form> 
-    <form>
-        <div v-show="showAddressFields" class="row my-4">
-            <div class="col-6">
-                <dropdownQuestion v-model="state" ref="state" inputId="state" :options="stateOptions" labelText="State"  />
-            </div>            
-            <div class="col-6">
-                <textboxQuestion v-model="zip" ref="zip" inputId="zip" labelText="Zip" />
-            </div>      
-        </div> 
-    </form>
+    </transition> 
     <alert v-show="displayVerificationWarning"
         alertClass="alert-warning"
         alertHeadline="Please verify your address."