Question

使用vue.js和bootstrap，尝试实现项目的转换组消失，剩下的物品移动到位，我遇到了淡化物品同时移动到列表位置0。

只有当我将vue transition-group与bootstrap list-group一起使用时，才能得到这个bevahiour。

使用没有列表组的普通转换组的行为符合我的预期。

参见jsfiddle：https://jsfiddle.net/exd7zdex/4/

JS

app = new Vue({
  el: "#app",
    data: {
    items: [],
    counter: 0
  },
  methods: {
    addItem: function() {
        this.items.push("Item " + this.counter++);
    },
    removeItem: function () {
        if (this.items.length == 0) {
        return 
      } else {
            index = Math.floor(Math.random() * this.items.length);
        this.items.splice(index, 1);
        }
    }
  }
})

for (var i=0; i < 5; i++) {
    app.addItem();
}

HTML

<div id="app" class="card">
  <div class="card-header">
    <button @click="addItem">add</button>
    <button @click="removeItem">remove</button>
  </div>
  <transition-group tag="ul" name="mylist" class="list-group">
    <li class="mylist-item list-group-item" v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>

CSS

.mylist-item {
  transition: all 1s;
}
.mylist-enter, .mylist-leave-to {
  opacity: 0;
}
.mylist-leave-active {
  position: absolute;
}

Answer 1

我修改了.mylist-leave-active的css来处理height和padding而不是position:absolute。

希望这有助于您更接近您的目标。

.mylist-leave-active {
  /* position: absolute; */
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  font-size: 0;
  color: transparent;
}

https://jsfiddle.net/jacobgoh101/e7s90s4w/3/

使用vue和bootstrap列出转换：阻止已删除的项目向上移动

JS

HTML

CSS

1 个答案: