title: Vue.js delay v-if toggle
body: <p>I want to delay a <code>v-if</code> toggle so that my element is not removed straight away but after 300 ms. I need to element to be removed from the DOM so I need to use a <code>v-if</code>.</p>
  
  <p>Currently I have a somewhat hacky solution to get this done. I wrapped my <code>v-if</code> statement in a transition and set a transition with <code>.3s</code>. </p>
  
  <p>I am using the opacity here but I am not doing anything with it since I do not want to fade the element out but simply delay the <code>v-if</code> toggle.</p>
  
  <p><strong>My element:</strong></p>
  
  <pre><code>&lt;transition name="delay-display-none"&gt;
      &lt;div class="i-need-to-be-removed-after-300-ms"&gt;&lt;/div&gt;
  &lt;/transition&gt;
  </code></pre>
  
  <p><strong>My style:</strong></p>
  
  <pre><code>.delay-display-none-leave-active {
      transition: opacity .3s
  }
  .delay-display-none-leave-to {
      opacity: 1
  }
  </code></pre>
  
  <p>Is there a better option to get this done instead of this hacky solution?</p>