Vue

HTML

<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="deletePlayer(player.id)">Remove</span>
        </h2>
      </div>
    </transition-group>
  </div>
</div>

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

Vue

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