Vuejs - 通过transition-group列出转换 - 父容器不能平滑地动画

Question

所以我有一个用v-for呈现的列表，我也使用transition-group来动画添加和删除此列表中的项目。我的问题是，虽然我可以设置列表项的添加/删除动画，但是整个列表周围的容器不能顺利过渡其高度。我想知道如何解决这个问题。

以下是最后一个“运行代码段”的示例：

var vm = new Vue({
  el: '#vue-instance',
  data: {        
      inventory: [
      {name: 'Air', price: 1000, id:"name0"},
      {name: 'Pro', price: 1800, id:"name1"},
      {name: 'W530', price: 1400, id:"name2"},
      {name: 'One', price: 300, id:"name3"}
    ]
  },
  methods: {
  	addItem() {
    	this.inventory.push({
      	name: 'Acer',
        price: 700,
        id: 'name4'
      });
    },
    removeItem(index) {
    	this.inventory.splice(index, 1);
      
     this.inventory.forEach((item, index) => {
     		item.id = `name${index}`;
     }); 
    }
  }
});

.container {
      background-color: green;
    }
    
    .list-enter {
        opacity: 0;
    }

    .list-enter-active {
        transition: all 2s;
        height: 100%;
        animation: slide-in 2s ease-out forwards;
    }

    .list-leave-to {

    }

    .list-leave-active{
        transition: all 2s;
        opacity: 0;
        animation: slide-out 2s ease-out forwards;
    }

    .list-move {
        transition: transform 2s;
    }

    @keyframes slide-in {
         from {
             transform: translateY(-100px);
         }
         to {
             transform: translateY(0);
         }
     }

    @keyframes slide-out {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateX(30px);
        }
    }

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="vue-instance">
<div class="container">
<ul>
  <transition-group name="list">
    <div v-for="(item, index) in inventory" :key="item.name">
      <label :for="item.id">Hello</label>
      <input :id="item.id">
      <button @click="removeItem(index)">
        Remove item
      </button>
      <button @click="addItem">
        Add item
      </button>
    </div>
  </transition-group>
    
  </ul>
</div>
  
</div>

Answer 1

可以通过向滑出动画

添加高度值来完成

@keyframes slide-out {
    from {
        transform: translateY(0);
        height: 10px;
    }
    to {
        transform: translateY(-30px);
        height: 0;
    }
}

https://codepen.io/jacobgoh101/pen/EEvNzB?editors=0100