Vue.js中的自定义列表重新排序动画

Question

我对Java语言还很陌生，到目前为止，我真的很喜欢Vue。我想对列表中项目的重新排序进行动画处理，并使用transition-group来这样做。它可以工作，但是我发现在FLIP动画中让项目相互重叠会产生令人困惑的结果：很难掌握上升或下降的幅度以及幅度。

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)
    }
  }
})
.flip-list-move {
  transition: transform 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

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

是否有一种简单的方法（例如，一些CSS）使项目在向上/向下移动时向左/向右偏离一点？理想情况下，距离与移动长度成正比（即获得/失去的等级数量）？

非常感谢您的帮助！

我对Java语言还很陌生，到目前为止，我真的很喜欢Vue。我想对列表中项目的重新排序进行动画处理，并使用过渡组来这样做。它有效，但是我发现拥有...