Description

• The v-if'd div of checkboxes have been wrapped in a transition tag
• A vue transition class called slide-fade was added to define how it should enter and exit

The main issue is that I hardcoded the starting height of the div during the transition to 44px.
https://github.com/alexjharrison/vue-cookie-consent-banner/blob/20-cookie-options-transition/src/components/CookieModal.vue#L276

Setting to height: 100% broke the transition and reading the height with JS reports a height of 0px when in a closed state. Not sure how to handle this when the slot is overwritten.

Issue Ticket Number

Fixes #20

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• I have followed the contributing guidelines of this project as mentioned in CONTRIBUTING.md
• I have checked to ensure there aren't other open Pull Requests for the same update/change?
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes needed to the documentation