title: Difficulty with Vue transitions on rendered elements
body: <p><strong>Vue 2.1.10</strong></p>
  <p>I have a component that is responsible for sending email invites. The user enters the email address into an input box and clicks a button, which makes a request to the server. The server's response is assigned to the <code>inviteResponse</code> property of the component. A div element is then displayed:</p>
  <pre><code>&lt;div v-if=&quot;inviteResponse != ''&quot;&gt;{{ inviteResponse }}&lt;/div&gt;
  </code></pre>
  <p>I want to make it so that, 3 seconds after it is displayed, this message slowly fades out. I've been trying to get this to work using <a href="https://v2.vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">Vue Transition Effects</a>, but haven't had luck so far. Here's what I've tried:</p>
  <pre><code>&lt;transition name=&quot;element-fade&quot; appear&gt;
      &lt;div v-if=&quot;inviteResponse != ''&quot;&gt;{{ inviteResponse }}&lt;/div&gt;
  &lt;/transition&gt;
  </code></pre>
  <p>CSS rules on the component:</p>
  <pre><code>&lt;style scoped&gt;
  .element-fade-leave {
      opacity: 1;
  }
  .element-fade-leave-active {
      transition: opacity 3s ease;
      transition-delay: 3s;
  }
  .element-fade-leave-to {
      opacity: 0;
  }
  &lt;/style&gt;
  </code></pre>
  <p>According to the <a href="https://v2.vuejs.org/v2/guide/transitions.html#Transition-Classes" rel="nofollow noreferrer">official guide</a>, Vue should automatically detect these, start the leaving element at opacity 1, then after a 3 second delay transition it out over a 3 second period until it's gone.</p>
  <p>In my case though, absolutely nothing happens.</p>