title: Vue3 transition-group, enter active animation is not working while leave is working
body: <p>I tried to animate addition and deletion of element in v-for loop.
  I searched some similar quesitons here and mainly the answers were about
  class name change in vue3 from vue2.</p>
  <p>I'm sure my case is not related to class name.
  My code is as below.</p>
  <p><strong>Component name: VueOnly</strong>
  </p>
  <pre><code>    &lt;transition-group tag='div' class='VueOnly' name='fade'&gt;
        &lt;div class='graphs' v-for=&quot;boro in lotteriesByBorough&quot; :key=&quot;boro['value']&quot;&gt;
  
          &lt;div&gt;{{boro[0]}}&lt;/div&gt;
          &lt;div class=&quot;bargraph&quot; :style=&quot;{width: xScale(boro[1]) + 'px'}&quot;&gt;&lt;/div&gt;
  
        &lt;/div&gt;
       &lt;/transition-group&gt;
       &lt;div style='display:none'&gt;{{console}}&lt;/div&gt;
  
  &lt;/template&gt;
  </code></pre>
  <p>*css</p>
  <pre><code>.fade-enter-active{
    animation:fade-in 1s 
  }
  
  .fade-leave-active{
    animation:fade-in 1s reverse
  }
  
  @keyframes fade-in {
    from{
      opacity:0  ;
      width:0 ;
      background-color:blue ;
    }
    to{
      opacity:1;
      width:100%;
    }
  }
  </code></pre>
  <p>I strongly believe I am following the syntax of 
  why is this not working?</p>
  <p>It works only when 'leave' event is triggered.
  Temporary class is added when 'leave' events are running while no class is added when 'enter' events are running.</p>
  <p>So I think there is a problem in enter process in general.</p>
  <p>Does it have anything to do with addition logic?</p>
  <p>My addition logic is as below.
  <strong>App.vue</strong></p>
  <pre><code>&lt;div class=&quot;filters&quot;&gt;
          &lt;el-checkbox-group v-model=&quot;filters&quot;&gt;
            &lt;el-checkbox label=&quot;1&quot;&gt;&lt;/el-checkbox&gt;
            &lt;el-checkbox label=&quot;2&quot;&gt;&lt;/el-checkbox&gt;
            &lt;el-checkbox label=&quot;3&quot;&gt;&lt;/el-checkbox&gt;
            &lt;el-checkbox label=&quot;4&quot;&gt;&lt;/el-checkbox&gt;
          &lt;/el-checkbox-group&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;section&quot; :style=&quot;{width:`${width}px`,height:`${height}px`}&quot;&gt;
          &lt;vue-only 
          :lotteries=&quot;filteredLotteries&quot;
          :lottery-stats=&quot;lotteryStats&quot;
          :width=&quot;width&quot;
          &gt;
          &lt;/vue-only&gt;
        &lt;/div&gt;
  The entire code can be seen in the following link.
  </code></pre>
  <p><a href="https://github.com/jotnajoa/studioquestion/tree/main/d3vue" rel="nofollow noreferrer">https://github.com/jotnajoa/studioquestion/tree/main/d3vue</a></p>