cromerc/modal-transitions-1

difficulty	training	chapter	tags
1	true	Chapter 3: Intermediate Vue.js	vue

Modal Transitions

Challenge Description

In this challenge, let's make our app look a little nicer by adding some transitions to the modal component.

💡 HINT: We've updated the modal overlay component so that it takes in a show prop instead of using v-if to show/hide it.

Requirements

• When the modal component appears and disappears it should be done with a smooth transition.
• We want to have two different transitions
  1. the modal overlay (the dark background) should fade in
  2. the modal itself should slide in (fade in + slide down 50px)

Other Considerations

• If you see the data-test attribute anywhere in the boilerplate don't remove it.
• TailwindCSS is preinstalled with the default config. It might be helpful for you, if you want to have some styles. (Not obligatory)

Example of Finished App

This is an example of what the functionality should look like for the completed exercise. If you’d like to mimic this style, feel free to do so, but it is not required.