Почему transition-group анимирует прозрачность а не высоту?

Позвольте похожий вопрос - почему не анимируэтся этап создания елемента, к примеру в вашем примере, а только ищезновения

<template>
  <div id="list-demo">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
    };
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length);
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++);
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1);
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  opacity: 1;
}
.list-enter-active,
.list-leave-active {
  transition: all 2s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
}
</style>

Как сделать require файла из папки public?

Алексей Ярков, Но если я использою require(`/img/${name}.png`); то получаю ошибку

This dependency was not found:

* /img in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save /items
Error from chokidar (/): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'

Как сделать require файла из папки public?

Просто чтоб можно было поставить картинки без перекомпиляции проекта

Почему v-for не удаляется при использовании map?

Простите, за не совсем правильное описание. Я имею ввиду что он не удяляется, эсли анимация не задана он должен просто удалится - но этого не происходит...