Vue.js for中的组件动画

我有输入类型的子组件，我试图在选择列表时使它们逐个显示，但它仅在我更改选择时将动画应用于我

我添加我的代码：

` Elije tu Juego de la Suerte：

  <select name="games" id="games" v-model="selected">
    <option value="">Seleccionar ...</option>
    <option
      v-for="(option, index) in options"
      :key="index"
      :value="option.value"
    >
      {{ option.text }}
    </option>
  </select>


  <h2 v-if="selected !== ''">El juego seleccionado es: {{ selected }}</h2>

  <transition-group name="list" tag="p">
  <div class="content-input" v-if="selected == 'chispazo'">
    <Input @messageError="showErrorMessage" v-for="(n,index) in inputs.chispazo" :key="index" :name="index" class="list-item" />
  </div>
  </transition-group>

<transition name="fade">
  <div class="error" v-show="!isValid">{{ message }}</div>
</transition>

</template>

<script>

import Input from './Input.vue'

export default {
  name: "Favorito",
  components: {
      Input,
  },
  data() {
    return {
      selected: "",
      options: [
        { text: "Chispazo", value: "chispazo", mount: 3 },
        { text: "Melate Retro", value: "melate_retro", mount: 5 },
        { text: "Gana Gato", value: "gana_gato", mount: 3 },
        { text: "Tris", value: "tris", mount: 4 },
      ],
      inputs: {
        chispazo: 20,
        melateretro: 8,
        ganagago: 10,
        tris: 3,
      },
      message: '',
      isValid: true
    };
  },
  methods: {
      showErrorMessage(value){
          console.log('--> recibiendo del padre:', value)
          this.message = value[0]
          this.isValid = value[1]
      }
  },
};
</script>

<style scoped>
.content-input {
  margin: auto;
  width: 80%;
  background-color: #c0c0c0;
  padding: 12px;
}

.error {
  color: red;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transition: 1s
}


.list-item {
  display: inline-block;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateX(30px);
}
</style>

选择。。。
{{option.text}
El juego Seleccionades:{{selected}
{{message}}
从“./Input.vue”导入输入
导出默认值{
姓名：“Favorito”，
组成部分：{
输入，
},
数据（）{
返回{
选定：“，
选项：[
{文本：“Chispazo”，值：“Chispazo”，山：3}，
{文本：“Melate Retro”，值：“Melate_Retro”，挂载：5}，
{文本：“加纳加托”，值：“加纳加托”，山：3}，
{文本：“Tris”，值：“Tris”，装载：4}，
],
投入：{
chispazo:20，
melateretro:8，
加纳加戈：10，
崔斯：3，
},
消息：“”，
有效：对
};
},
方法：{
错误消息（值）{
console.log（'-->recibiendo del padre:'，值）
this.message=值[0]
this.isValid=值[1]
}
},
};
.内容输入{
保证金：自动；
宽度：80%；
背景色：#C0；
填充：12px；
}
.错误{
颜色：红色；
}
。淡入激活状态。淡入保持激活状态{
过渡：不透明度
}
.fade输入、.fade leave to/*。在版本2.1.8*下，fade leave处于活动状态{
不透明度：0；
转换：1s
}
.清单项目{
显示：内联块；
}
.列表进入活动状态，.列表保持活动状态{
过渡：所有1；
}
.list输入.list leave to/*。list leave active低于版本2.1.8*/{
不透明度：0；
转换：translateX（30px）；
}

`

如何向for中的组件添加动画

非常感谢您的支持

---

问候。

你试过这样吗

---

谢谢伊沃·盖洛夫，我做了更改，但现在没有任何效果

我在研究中发现：

我的解决方案是使用select元素html创建动画