小编aru*_*sev的帖子

我有一个垂直项目列表，每个项目都可以删除。我将项目放入过渡组中，并为其创建了简单的不透明性并对其进行转换。删除的元素上的过渡按预期工作，但是，如果我删除未放置在底部的元素，则下面的元素会跳起来并在没有任何过渡的情况下就位。我找不到针对这种行为的方法。我只希望下面的元素平滑地向上滑动。

有什么方法可以通过使用CSS TranssentiPms和Vue的动画钩子来实现这种效果？

这是一个演示：https : //jsfiddle.net/gcp18nq0/

模板：

<div id="app">
 <div class="form">
  <label for="name">Name</label>
  <input type="text" id="name" v-model="name">
  <button @click="addPlayer">Add player</button>
 </div>
 <div class="players">
  <transition-group name="player">
   <div class="panel" v-for="player in players" :key="player.id">
    <h2>
      {{ player.name}}
      <span class="remove" @click="removePlayer(player.id)">Remove</span>
    </h2>
   </div>
  </transition-group>
 </div>
</div>

脚本：

  data() {
    return {
     name: "",
     players: [
       {id: 1, name: 'Player1'},
       {id: 2, name: 'Player2'},
       {id: 3, name: 'Player3'},
     ]
    }
  },
  methods: {
            addPlayer: function () {
                  //,,,,
                },
            removePlayer: function (playerId) {
                   //... …