title: Vue.js: prevent user clicking on element while it is being transitioned with Vue <transition>
body: <p>I'm working on a Vue.js project, and when I click on an element, I'm using the Vue transition tag to fade it out. The problem is that as the element is in the process of being faded out, it is still clickable, which in my application can cause issues.</p>
  
  <p>My question is: how can I make an element unclickable during a transition, so that users don't click it multiple times before the transition finishes?</p>
  
  <p>I've already tried applying a css class with point-events: none; to the element right when the transition starts, but it didn't stop clicks during transition.</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;transition name="fade"&gt;
    &lt;div v-if="shouldShow" @click="doSomeAction"&gt;Example text&lt;/div&gt;
  &lt;/transition&gt;
  </code></pre>
  
  <p>(where doSomeAction sets shouldShow to false).</p>