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

Creating fade animation

Browse source
This commit is contained in:
Max 2022-02-22 15:06:35 -05:00
parent 160b9f6e02
commit 2e26ddba39
8 changed files with 48 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.vue
View file

@ -7,4 +7,5 @@
@import "@/styles/common-styles.scss";
@import "@/styles/common-typography-styles.scss";
@import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss";
</style>

12
src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
View file

@ -87,15 +87,3 @@ export default ({
}
})
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>

21
src/layouts/vehicle-damage/side-door-options/side-door-options.vue
View file

@ -1,13 +1,17 @@
<template>
<div class="side-door-options">
<buttonQuestion
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="selectedDoorSidesValues"
/>
<transition name="fade" mode="out-in">
<div class="side-doors" v-if="selectedDamageLocations.includes('SideDoor')" aria-live="polite">
<buttonQuestion
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="selectedDoorSidesValues"
/>
</div>
</transition>
<replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
@ -35,6 +39,7 @@ export default ({
props: {
groupName: String,
modelValue: Array,
selectedDamageLocations: Array,
},
methods: {
initializeComponent(cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions){

2
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -4,11 +4,11 @@
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader ref="funnelSubHeader" />
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
<sideDoorOptions ref="sideDoorOptions" isAvailable groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" />
<windshieldOptions ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:selectedDamageLocations="selectedDamageLocations"
/>
<sideDoorOptions ref="sideDoorOptions" groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" :selectedDamageLocations="selectedDamageLocations" />
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
</div>
</template>

7
src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
View file

@ -1,8 +1,7 @@
<template>
<transition name="fade">
<div class="windshield-chip-count-question">
<transition name="fade" mode="out-in">
<div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
<buttonQuestion
v-if="isAvailable"
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
@ -49,4 +48,4 @@ export default ({
buttonQuestion,
}
})
</script>
</script>

7
src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
View file

@ -1,8 +1,7 @@
<template>
<transition name="fade">
<div class="windshield-damage-type-question">
<transition name="fade" mode="out-in">
<div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
<buttonQuestion
v-if="isAvailable"
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
@ -68,4 +67,4 @@ export default ({
buttonQuestion,
}
})
</script>
</script>

38
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -1,24 +1,22 @@
<template>
<transition name="fade">
<div class="windshield-options" aria-live="polite">
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
:isAvailable=isWindshieldDamageLocation
:suppressError="suppressError"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedWindshieldDamageTypeValues"
/>
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
:isAvailable=isRepairOptionSelected
groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues"
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
/>
</div>
</transition>
<div class="windshield-options">
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
:isAvailable=isWindshieldDamageLocation
:suppressError="suppressError"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedWindshieldDamageTypeValues"
/>
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
:isAvailable=isRepairOptionSelected
groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues"
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
/>
</div>
</template>
<script>

9
src/styles/common-animations.scss Normal file
View file

@ -0,0 +1,9 @@
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s 2s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}