title: Why are my Vue Transitions not working after build?
body: <p>I have just deployed my first vue app that uses vue transitions and I am noticing that my transitions do not work after I deployed the app.  To also share, this app is built with the vue CLI.  These transitions work fine during development but after I ran the build and deployed the app the &quot;enter&quot; transition is not working but the &quot;leave&quot; transition works.  Below is an example of the code (although I don't think it will be so helpful).  What I am wondering is if there is something that takes place during the build process that would result in the css changing?  I did check the final css file after build and I can still see the classes in the file.  Any help is appreciated!</p>
  <p>Example:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;modal-overlay&quot;&gt;&lt;/div&gt;
    &lt;transition name=&quot;modal&quot;&gt;
       //more html
    &lt;/transition&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    // methods and stuff...
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .dialog {
    text-align: center;
    border-radius: 10px;
    position: absolute;
    left: calc(50% - 20rem);
    top: calc(50% - 10rem);
    /* margin-top: 20%; */
    width: 40rem;
    border: 2px solid #00f6f6;
    background-color: #0f0f0f;
    color: #efefef;
    padding: 10px;
    z-index: 94;
  }
  
  .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 93;
  }
  
  .modal-enter-from,
  .modal-leave-to {
    opacity: 0%;
    transform: scale(0);
  }
  
  .modal-enter-to,
  .modal-leave-from {
    opacity: 100%;
    transform: scale(1);
  }
  
  .modal-enter-active {
    transition: all 0.3s ease;
  }
  
  .modal-leave-active {
    transition: all 0.3s ease;
  }
  </code></pre>