代码之家 › 专栏 › 技术社区 › João Menighin

具有互斥元素的Vue转换列表

transition vue.js javascript

0

João Menighin · 技术社区 · 6 年前

我正在制作一个列表 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 我们可以看到动画很笨拙。

有什么想法吗?

谢谢!

0 回复 | 直到 6 年前

1

0

stdob-- 6 年前

添加 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/ ]