title: Transition with partial opacity
body: <p>I'm following the guide here <a href="https://v2.vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/transitions.html</a> to animate a popup and their overlay. I need the overlay with a final opacity of 0.5 but Vue set it to 1 at the end. I tried something like this, but Vue animate the opacity to 0.5 and abruptly change it to 1 at the end of the animation:</p>
  <pre class="lang-css prettyprint-override"><code>.fade-enter {
    opacity: 0;
  }
  .fade-enter-active {
    transition: opacity 2s;
  }
  .fade-enter-to {
    opacity: 0.5;
  }
  </code></pre>
  <p>Here is a test that illustrate the problem <a href="https://jsfiddle.net/50wL7mdz/58865/" rel="nofollow noreferrer">https://jsfiddle.net/50wL7mdz/58865/</a></p>
  <p><strong>Update</strong></p>
  <p>Working solution <a href="https://jsfiddle.net/50wL7mdz/58877/" rel="nofollow noreferrer">https://jsfiddle.net/50wL7mdz/58877/</a> There is no need to add the final opacity to the fade classes.</p>