title: Component animation in a for
body: <p>I have child components of type input and I am trying to make them appear one by one when selecting the list, but it only applies the animation to me when I change selection</p>
  <p>I add my code:</p>
  <p>`
  
  Elije tu Juego de la Suerte: </p>
  <pre><code>  &lt;select name=&quot;games&quot; id=&quot;games&quot; v-model=&quot;selected&quot;&gt;
      &lt;option value=&quot;&quot;&gt;Seleccionar ...&lt;/option&gt;
      &lt;option
        v-for=&quot;(option, index) in options&quot;
        :key=&quot;index&quot;
        :value=&quot;option.value&quot;
      &gt;
        {{ option.text }}
      &lt;/option&gt;
    &lt;/select&gt;
  
  
    &lt;h2 v-if=&quot;selected !== ''&quot;&gt;El juego seleccionado es: {{ selected }}&lt;/h2&gt;
  
    &lt;transition-group name=&quot;list&quot; tag=&quot;p&quot;&gt;
    &lt;div class=&quot;content-input&quot; v-if=&quot;selected == 'chispazo'&quot;&gt;
      &lt;Input @messageError=&quot;showErrorMessage&quot; v-for=&quot;(n,index) in inputs.chispazo&quot; :key=&quot;index&quot; :name=&quot;index&quot; class=&quot;list-item&quot; /&gt;
    &lt;/div&gt;
    &lt;/transition-group&gt;
  
  &lt;transition name=&quot;fade&quot;&gt;
    &lt;div class=&quot;error&quot; v-show=&quot;!isValid&quot;&gt;{{ message }}&lt;/div&gt;
  &lt;/transition&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import Input from './Input.vue'
  
  export default {
    name: &quot;Favorito&quot;,
    components: {
        Input,
    },
    data() {
      return {
        selected: &quot;&quot;,
        options: [
          { text: &quot;Chispazo&quot;, value: &quot;chispazo&quot;, mount: 3 },
          { text: &quot;Melate Retro&quot;, value: &quot;melate_retro&quot;, mount: 5 },
          { text: &quot;Gana Gato&quot;, value: &quot;gana_gato&quot;, mount: 3 },
          { text: &quot;Tris&quot;, value: &quot;tris&quot;, mount: 4 },
        ],
        inputs: {
          chispazo: 20,
          melateretro: 8,
          ganagago: 10,
          tris: 3,
        },
        message: '',
        isValid: true
      };
    },
    methods: {
        showErrorMessage(value){
            console.log('--&gt; recibiendo del padre:', value)
            this.message = value[0]
            this.isValid = value[1]
        }
    },
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .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);
  }
  &lt;/style&gt;
  </code></pre>
  <p>`</p>
  <p>How can I add animations to components within a for?</p>
  <p>Thank you very much for your support</p>
  <p>Regards.</p>