Question

我有一个垂直的项目列表，每个项目都可以删除。我将我的项目放在过渡组中，并为它们创建了简单的不透明度和变换过渡。被移除元素上的过渡按预期工作，但是如果我移除一个未放置在底部的元素，那些下面的元素只是跳起并取而代之而没有任何过渡。我无法找到针对此行为的方法。我想要的只是下面的元素顺利滑动。

有没有办法通过使用css transitipms和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) {
                   //...
            }
         }
  });

CSS

.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;
}

我发现的唯一工作方式是在“玩家离开 - 活动”状态下添加position：absolute但是由于元素崩溃，它会改变其垂直位置，这不是所需的效果。我也试过改变高度但是在高度设置为0之后，下面的元素仍然会跳起来。我确信这可以通过jQuery轻松实现，但我相信应该有一种方法来做到没有js。

提前谢谢！

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

Answer 1

所以我对你的小提琴进行了一些小调整：https://jsfiddle.net/gcp18nq0/1/，希望这就是你要找的东西。

＆＃13;

new Vue({
  el: "#app",
  data() {
    return {
      name: "",
      players: [{
          id: 1,
          name: 'Batman'
        },
        {
          id: 2,
          name: 'Robin'
        },
        {
          id: 3,
          name: 'Superman'
        },
        {
          id: 4,
          name: 'Spiderman'
        },
      ]
    }
  },
  methods: {
    addPlayer: function() {
      const newPlayer = {
        id: this.players.length + 1,
        name: this.name,
      };
      this.players.push(newPlayer);
    },
    deletePlayer: function(playerId) {
      let playerToRemove = this.players.find((player) => {
        return player.id === playerId;
      });

      let playerIndex = this.players.indexOf(playerToRemove);
      this.players.splice(playerIndex, 1);
    }
  }
});

＆＃13;

.form {
  margin: 0 auto;
  width: 400px;
}

.panel {
  width: 400px;
  margin: 6px auto;
  overflow: hidden;
  border: 1px solid;
  text-align: center;
  transition: all 1s;
  display: inline-block;
}

.players {
  position: relative;
  text-align: center;
}

.remove {
  float: right;
  cursor: pointer;
  text-decoration: underline;
  font-size: 12px;
  vertical-align: bottom
}

.player-enter,
.player-leave-to {
  opacity: 0;
}

.player-enter {
  transform: translateY(30%);
}

.player-leave-to {
  transform: translateX(300%);
}

.player-leave-active {
  position: absolute;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<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" tag="div">
      <div class="panel" v-for="player in players" :key="player.id">
        <h2>
          {{ player.name}}
          <span class="remove" @click="deletePlayer(player.id)">Remove</span>
        </h2>
      </div>
    </transition-group>
  </div>
</div>

＆＃13;

最重要的变化是display: inline-block类.panel的集合。根据{{3}}

一个重要的注意事项是这些FLIP转换无效元素设置为显示：内联。作为替代方案，您可以使用 display：inline-block 或将元素放在flex上下文中。

如何在删除一个项目时为Vue中的列表项设置动画

1 个答案: