feat: Add fade transition for cookie options

[alexjharrison]

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)
• [x] 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:

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

[alexjharrison]

Just realized I started with a very old branch. Will rework this.

[Gismo1337]

sorry to hear that @alexjharrison is this my fault? I am new at maintain a repo too, so may I had to inform you?

[alexjharrison]

No this was on me. I made the fix on my original fork and didn't update to the latest master which had many more changes.

My fix mostly works but I'm working on edge cases for different screen sizes. I should have another PR tomorrow.