具有互斥元素的 Vue 过渡列表

Question

我在我的应用程序中使用 transition-group 为列表制作动画。此列表由 select 输入过滤。 select 要么是 selecting 全部，要么是 selecting 互斥组。这有点严重破坏了过渡。我想我需要像过渡模式这样的东西来让它工作，但是 VueJS docs 指出：

Transition modes are not available (for transition-group), because we are no longer alternating between mutually exclusive elements.

这是一个示例代码：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">

  <select v-model="filter">
    <option v-for="(o, i) in filterOptions" :key="`o-${i}`" :value="o"> {{ o }}</option>
  </select>

  <table>
    <transition-group name="fade" tag="ul">
      <li v-for="t in filteredRows" :key="t.label">{{ t.label }} - {{ t.prop }}</li>
    </transition-group>
  </table>

</div>

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 => 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;
}

这是一个 fiddle：https://jsfiddle.net/0v6pa8tk/

当 select 在 p1 和 p2 之间时，我们可以看到动画很笨拙。

对此有什么想法吗？

谢谢！

Answer 1

添加一个vertical translation:

.fade-enter-active,
.fade-leave-active,
.fade-move {
  transition: all .5s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.fade-enter, .fade-leave-to
{
  opacity: 0;
  transform: translateY(30px);
}

.fade-leave-active {
  position: absolute;
}

li {
  transition: all 1s;
}

[https://jsfiddle.net/p36xe0qt/]

具有互斥元素的 Vue 过渡列表

Vue transition list with mutual exclusive elements

javascript

transition

vue.js