添加新子对象时父对象平滑高度变化[Vue]

<transition name="fade">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: height 0.5s;
}

.fade-enter, .fade-leave-to {
  height: 0;
  opacity: 0;
}

new Vue({
  data: {
    items: [
      { id: 1, name: '子对象1' },
      { id: 2, name: '子对象2' },
      { id: 3, name: '子对象3' }
    ]
  },
  methods: {
    addItem() {
      const newItem = { id: this.items.length + 1, name: '新的子对象' };
      this.items.push(newItem);
    }
  }
});

<button @click="addItem">添加新子对象</button>