[Vuejs]-Show modal pop up with animation Vue

Try that codes:

1. Define the transition component in your Vue component’s template section:

<template>
  <div>
    <!-- Modal trigger button -->
    <button @click="openModal">Open Modal</button>

    <!-- Modal with transition -->
    <transition name="modal-fade">
      <div v-if="isModalOpen" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
          <!-- Modal close button -->
          <button @click="closeModal">Close Modal</button>
          <!-- Add your modal content here -->
        </div>
      </div>
    </transition>
  </div>
</template>

2. Define the CSS animation for the transition in your component’s style section:

<style>
  .modal-fade-enter-active,
  .modal-fade-leave-active {
    transition: opacity 0.3s;
  }

  .modal-fade-enter,
  .modal-fade-leave-to {
    opacity: 0;
  }

  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content {
    background-color: white;
    padding: 20px;
  }
</style>

That’s it it should be work. 🙂