title: Vue.Js transition not functional
body: <p>I'm trying to use the Vue transitions located on the <a href="https://v2.vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">vue docs</a> (specifically the &quot;Slide Fade&quot;) in order to animate the changing of text on a component. I have this particular tag set to render when a watched computed property returns from a vuex store. In order to transition the text through the various options, i have a recursive timeout function that sets the &quot;showAnnouncement&quot; property to false, sets the new text, then makes it true again. This works perfectly with or without the transition.</p>
  <p>Here is a snippet from my template, showing it in action.</p>
  <pre><code>&lt;div class=&quot;announcements&quot;&gt;
      &lt;h2&gt; Announcements &lt;/h2&gt;
      &lt;transition  name=&quot;slide-fade&quot;&gt;
              &lt;h3 v-if=&quot;showAnnouncement&quot;&gt;
                  &lt;a :href=&quot;announcementCurrent.link&quot; class=&quot;announcementLink&quot;&gt;
                  {{announcementCurrent.title}}
                  &lt;/a&gt; 
                  - {{announcementCurrent.author}}
              &lt;/h3&gt;
      &lt;/transition&gt;
      &lt;!--  --&gt;
  &lt;/div&gt;
  </code></pre>
  <p>One of the troubleshooting steps I took was to completely forgo the vue transition component, and set CSS transitions directly on the class. Which failed, so I've decided to go back to square one with vue transitions.</p>
  <p>Here is the CSS for the transition, pulled directly from the documentation I've linked above:</p>
  <pre><code>.slide-fade-enter-active {
       transition: all .3s ease;
  }
  .slide-fade-leave-active {
      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
      /* .slide-fade-leave-active below version 2.1.8 */ {
      transform: translateX(10px);
      opacity: 0;
  }
  </code></pre>
  <p>Sorry in advance if the spacing is a little off, it didn't seem to want to paste indented properly.
  I'm a bit at a loss right now, and thank you in advance for your help.</p>
  <p>P.S. I should also mention, that this project uses Vuetify, I don't think it would affect anything, but it might be good to know.</p>