Javascript 如何在移除列表项时在Vue中设置列表项的动画

我有一个垂直的项目列表，每个项目都可以删除。我将我的项目放在一个转换组中，并为它们创建简单的不透明度和变换转换。移除的元素上的转换按预期工作，但是如果我移除一个未放置在底部的元素，下面的元素只会跳起来并在没有任何转换的情况下取代它的位置。我找不到针对这种行为的方法。 我只想让下面的元素平滑地向上滑动

有没有办法通过使用css和Vue的动画挂钩来实现这种效果

下面是一个演示：

模板：

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

CSS

我发现的唯一有效方法是在“玩家离开活动”状态下添加position:absolute，但由于元素折叠，它会改变其垂直位置，这不是期望的效果。我也尝试过改变高度，但在高度设置为0后，下面的元素仍然会向上跳一点。 我确信使用jQuery可以很容易地实现这一点，但我相信应该有一种不用js的方法

提前谢谢你

---

p、 这是我在这里的第一篇文章，所以我希望它解释得足够清楚

所以我对你的小提琴做了一些小调整：

https://jsfiddle.net/gcp18nq0/1/

希望这就是您想要的

newvue({
el:“应用程序”，
数据（）{
返回{
姓名：“，
玩家：[{
id:1，
名字：“蝙蝠侠”
},
{
id:2，
名字：“罗宾”
},
{
id:3，
名字：“超人”
},
{
id:4，
名字：“蜘蛛侠”
},
]
}
},
方法：{
addPlayer:function（）{
常数newPlayer={
id:this.players.length+1，
姓名：this.name，
};
这个。玩家。推（新玩家）；
},
deletePlayer:函数（playerId）{
让playerToRemove=this.players.find（（player）=>{
return player.id==playerId；
});
让playerIndex=this.players.indexOf（playerToRemove）；
这个.players.splice（playerIndex，1）；
}
}
});
.form{
保证金：0自动；
宽度：400px；
}
.小组{
宽度：400px；
保证金：6px自动；
溢出：隐藏；
边框：1px实心；
文本对齐：居中；
过渡：所有1；
显示：内联块；
}
.球员{
位置：相对位置；
文本对齐：居中；
}
.移除{
浮动：对；
光标：指针；
文字装饰：下划线；
字体大小：12px；
垂直对齐：底部对齐
}
.玩家进入，
.球员离开{
不透明度：0；
}
.玩家进入{
转化：translateY（30%）；
}
.球员离开{
转化：translateX（300%）；
}
.玩家离开激活状态{
位置：绝对位置；
}

名称
添加玩家
{{player.name}
去除
这里的另一个增强功能是，当整个列表高度发生变化时，父容器也能平稳过渡。现在，当行出现/消失时，父容器将跳转。
  data() {
    return {
     name: "",
     players: [
       {id: 1, name: 'Player1'},
       {id: 2, name: 'Player2'},
       {id: 3, name: 'Player3'},
     ]
    }
  },
  methods: {
            addPlayer: function () {
                  //,,,,
                },
            removePlayer: function (playerId) {
                   //...
            }
         }
  });

.form {
  margin:0 auto;
  width:400px;
}
.panel {
  width: 400px;
  margin: 10px auto;
  overflow: hidden;
  border: 1px solid;
  text-align: center;
}

.remove {
  float: right;
  cursor: pointer;
  text-decoration: underline;
  font-size: 12px;
  vertical-align: bottom
}

.player-enter,
.player-leave-to
/* .fade-leave-active below version 2.1.8 */

  {
  opacity: 0;
}

.player-enter {
  transform: translateY(30%);
}

.player-leave-to {
  transform: translateX(30%);
}

.player-enter-active,
.player-leave-active {
  transition: all 1.5s;
}

.player-move {
  transition: all 1.5s;
}