title: Vuejs transition is not working to show a modal
body: <p>I am at a loss to why my animation is not working using vue transitions.  Here is my code:</p>
  <pre><code> &lt;template&gt;
    &lt;teleport to=&quot;body&quot;&gt;
      &lt;div class=&quot;modal-overlay&quot; v-if=&quot;loading&quot;&gt;
        &lt;transition name=&quot;loading&quot;&gt;
          &lt;div v-if=&quot;loading&quot; class=&quot;dialog&quot;&gt;
            &lt;h1&gt;LOADING&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/transition&gt;
      &lt;/div&gt;
    &lt;/teleport&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: [&quot;loading&quot;],
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .dialog {
    text-align: center;
    border-radius: 10px;
    width: 10%;
    border: 2px solid #00f6f6;
    background-color: #0f0f0f;
    color: #efefef;
    padding: 10px;
    /* animation: enter 0.25s linear; */
    overflow: hidden;
  }
  
  .modal-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  .loading-enter-active {
    animation: enter 0.2s ease-out;
  }
  
  .loading-leave-active {
    animation: leave 0.2s ease-in;
  }
  
  
  
  @keyframes enter {
    0% {
      opacity: 0%;
      transform: scale(0);
    }
    100% {
      opacity: 100%;
      transform: scale(1);
    }
  }
  
  @keyframes leave {
    0% {
      transform: scale(1);
      opacity: 100%;
    }
    100% {
      transform: scale(0);
      opacity: 0%;
    }
  }
  &lt;/style&gt;
  </code></pre>
  <p>I am passing a prop from the parent component called &quot;loading&quot;.  This serves as a modal and it serves the purpose as the modal is it does appear and disappear based on the value of &quot;loading&quot; but the animation is not working.  Can anyone tell me why?</p>
  <p>Thank you!</p>