title: Vue 2: Transition not working on component
body: <p>I have an animation that works on other components but does not work with this one.  I tried <code>&lt;transition-group&gt;</code> with no luck as well.  The row simply disappears without any animation.</p>
  
  <pre><code>&lt;transition name="card-animation"&gt;
      &lt;tr is="employee-row" 
          v-for="employee in employees" 
          :employee="employee" 
          :selectedOffice='selectedOffice'
          :new_hire_location_options="new_hire_location_options"
          v-on:fire='fireEmployee(employee)'
          v-if="(employee.location.name == selectedOffice || selectedOffice == 'show all')"&gt;
      &lt;/tr&gt;
  &lt;/transition&gt;
  </code></pre>
  
  <p>Here's the CSS</p>
  
  <pre><code>.card-animation-enter-active, .card-animation-leave-active {
      transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  }
  
  .card-animation-enter, .card-animation-leave-to {
      transform: scale(0);
      opacity: 0;
  }
  </code></pre>
  
  <p><strong>What is wrong with my code?</strong></p>