title: Vue transition list with mutual exclusive elements
body: <p>I'm animating a list with <code>transition-group</code> in my app.
  This list is filtered by a <code>select</code> input. The select is either selecting all of them or selecting mutual exclusive groups. This kinda breaks the transition badly.
  I think I would need something like Transition Modes to make it work, but <a href="https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions" rel="nofollow noreferrer">VueJS docs</a> states that:</p>
  <blockquote>
  <p>Transition modes are not available (for transition-group), because we are no longer alternating between mutually exclusive elements.</p>
  </blockquote>
  <p>Here's an example code:</p>
  <pre><code>&lt;script src=&quot;https://unpkg.com/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
  
  &lt;div id=&quot;app&quot;&gt;
    
    &lt;select v-model=&quot;filter&quot;&gt;
      &lt;option v-for=&quot;(o, i) in filterOptions&quot; :key=&quot;`o-${i}`&quot; :value=&quot;o&quot;&gt; {{ o }}&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;table&gt;
      &lt;transition-group name=&quot;fade&quot; tag=&quot;ul&quot;&gt;
        &lt;li v-for=&quot;t in filteredRows&quot; :key=&quot;t.label&quot;&gt;{{ t.label }} - {{ t.prop }}&lt;/li&gt;
      &lt;/transition-group&gt;
    &lt;/table&gt;
  
  &lt;/div&gt;
  
  new Vue({
    el: '#app',
    data: {
      filter: 'all',
      filterOptions: ['all', 'p1', 'p2'],
      rows: [
          {
          label: 'Row 1',
          prop: 'p1'
        },
        {
          label: 'Row 2',
          prop: 'p1'
        },
        {
          label: 'Row 3',
          prop: 'p2'
        },
        {
          label: 'Row 4',
          prop: 'p2'
        },
      ]
    },
    computed: {
      filteredRows: function() {
          return this.rows.filter(o =&gt; o.prop === this.filter || this.filter === 'all');
      }
    }
  })
  
  .fade-enter-active,
  .fade-leave-active,
  .fade-move {
    transition: all .5s;
  }
  
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
  
  li {
    transition: all 1s;
  }
  </code></pre>
  <p>And here's a fiddle with it: <a href="https://jsfiddle.net/0v6pa8tk/" rel="nofollow noreferrer">https://jsfiddle.net/0v6pa8tk/</a></p>
  <p>When selecting between <code>p1</code> and <code>p2</code> we can see the animation is clumsy.</p>
  <p>Any ideas on this?</p>
  <p>Thanks!</p>