Modal Pop-up Animation

Showcase how to animate the appearance and disappearance of a modal dialog with a scaling effect, controlled by Vue's <Transition> component.

new Vue({
  el: '#app',
  data: {
    showModal: false
  },
  methods: {
    toggleModal: function() {
      this.showModal = !this.showModal;
    }
  }
});

This is the Vue instance with a `showModal` data property to control the visibility of the modal. The `toggleModal` method toggles the value of `showModal`.

<template>
  <div id="app">
    <button @click="toggleModal">Open Modal</button>
    <transition name="modal">
      <div class="modal" v-if="showModal">
        <!-- Modal content here -->
        <button @click="toggleModal">Close</button>
      </div>
    </transition>
  </div>
</template>

This is the Vue template that uses the `<Transition>` component to animate the modal. When `showModal` is true, the modal and its content are rendered.

<style>
.modal-enter-active, .modal-leave-active {
  transition: all 0.5s ease;
}
.modal-enter, .modal-leave-to {
  transform: scale(0.9);
  opacity: 0;
}
</style>

This is the CSS for the modal animation. It applies a scaling and opacity transition effect when the modal enters (`modal-enter-active`) or leaves (`modal-leave-active`). The initial and final states of the animation are defined by `.modal-enter` and `.modal-leave-to` respectively.