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

Added transition effect to appearance of address fields after auto-complete

Browse source
This commit is contained in:
Leah Schumann 2022-02-25 08:28:52 -05:00
parent 9ab7b79682
commit ea038adcff
1 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -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."