때 제거된다 어떻게 뷰에서 목록 항목을 움직이기에.

때 제거된다 어떻게 뷰에서 목록 항목을 움직이기에.

나는 각각의 제거할 수 있는 제품, 수직의 목록을 가지고 있습니다.나는 transition-group고 단순한 불투명함를 그들을 위해 전환 만든 아이템들을 놓았습니다.는 제거된 요소에 대한 전환 예상대로, 만약 제가 바닥에 배치된 요소를 제거하지만, 아래에 있는 사람들은 그냥 일어나서 어떤 전환 없이 그 자리를 차지하기 위하여 일한다.나는 방법 이러한 행동을 타깃으로 할 건지 모르겠어.내가 원하는 단지 아래 요소를 원활하게를 미끄러지다.

다른 방법 css transitipms과 뷰의 애니메이션 갈고리를 사용하여 이 효과를 달성할 수 있을까요?

여기는 데모: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;
}

내가 찾아냈던 유일한 방법"player-leave-active"상태에 위치:절대를 첨가하여 현재는 요소가 무너지는이 아니다 원하는 효과가 수직 위치이며 바뀌었다.나는 또한 높이 변화하고 있지만 높이 0으로 설정하는 아직도 아래의 요소를 뛰려고 했다.나는 이것은 쉽게 jQuery것으로 이루어질 수 있지만이 있어야 하는 방법 js 없이 해야만 한다고 생각하는 것을 명심하라.

잘 부탁드립니다!

ps아 나의 첫번째 이곳에, 그래서 저야 그것이 충분히 설명되었기를 바랍니다.

그래서 나는 그것 당신이 찾고 있던 당신의 바이올린을 조금 tweaks:https://jsfiddle.net/gcp18nq0/1/을 만들었다.

가장 중요한 변화 있었다.display: inline-block에서.panelVue 설명서에 따르면 클래스:

한 가지 중요한 점은 이러한 FLIP 전환은 표시하도록 설정된 요소(inline)에서는 작동하지 않는다는 것입니다.대신 인라인 블록 표시 또는 플렉스 컨텍스트에 배치 요소를 사용할 수 있습니다.

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

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

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

언급URL : https://stackoverflow.com/questions/50311075/how-to-animate-list-items-in-vue-when-one-is-removed