1

使用vue transition-groups，有没有办法触发离开 + 进入转换而不是移动元素的移动转换？

它应该离开，然后进入新的位置。移动转换似乎只适用于转换。

操场：https ://codepen.io/anon/pen/WqJEmV

HTML：

<div id="flip-list-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>

JS：

new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})

CSS：

/** Should NOT use this: **/
.flip-list-move {
  transition: transform 1s;
}

/** Should use this instead: **/
.flip-list-enter-active, .flip-list-leave-active {
  transition: all 1s;
}

.flip-list-enter {
  opacity: 0;
  transform: translateX(80px);
}

.flip-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
4

2 回答 2

1

我有一个类似的问题，所以我想我会在这里为以后发现这个的其他人发帖：

对我有用的解决方案是利用该key属性强制 vue 将移动的项目视为“新”项目。这样，进入/离开动画就会被触发，而不是move。

我叉了你的笔来展示它是如何工作的： https ://codepen.io/josh7weaver/pen/eYOXxed?editors=1010

如您所见，这种方法的一个缺点是您必须增加数据模型的复杂性才能使其工作。即在你有一个简单的数组之前，在我们有一个对象数组之后，因为每个对象都需要负责它自己的键。

有许多不同的方法可以为你想要欺骗 vue 认为是“新”的项目生成唯一 ID，但我使用的方法只是从公共要点复制和粘贴。

希望能帮助到你！

于 2019-09-25T23:01:04.283 回答
0

据我所知：

  • 添加新项目时触发 Enter
  • 移除物品时触发离开
  • 订单改变时触发移动

如果您只想触发进入离开转换，则必须从数组中添加/删除项目而不是随机播放。

这是一个例子：

shuffle: function () {
    this.items = [1,3,5,7,9];
}
于 2019-07-03T08:32:24.497 回答