Question

我正在为应用中的transition-group制作一个列表动画。该列表由select输入过滤。选择要么选择所有这些，要么选择互斥组。这有点严重破坏了过渡。我认为我需要像“过渡模式”这样的东西才能使它起作用，但是VueJS docs指出：

过渡模式不可用（对于过渡组），因为我们不再在互斥元素之间交替。

这是示例代码：

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

这是一个小玩意儿：https://jsfiddle.net/0v6pa8tk/

在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过渡列表

1 个答案: