Vue3 transition-group, enter active animation is not working while leave is working

Question

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.

I'm sure my case is not related to class name. My code is as below.

Component name: VueOnly

    <transition-group tag='div' class='VueOnly' name='fade'>
      <div class='graphs' v-for="boro in lotteriesByBorough" :key="boro['value']">

        <div>{{boro[0]}}</div>
        <div class="bargraph" :style="{width: xScale(boro[1]) + 'px'}"></div>

      </div>
     </transition-group>
     <div style='display:none'>{{console}}</div>

</template>

*css

.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%;
  }
}

I strongly believe I am following the syntax of why is this not working?

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.

So I think there is a problem in enter process in general.

Does it have anything to do with addition logic?

My addition logic is as below. App.vue

<div class="filters">
        <el-checkbox-group v-model="filters">
          <el-checkbox label="1"></el-checkbox>
          <el-checkbox label="2"></el-checkbox>
          <el-checkbox label="3"></el-checkbox>
          <el-checkbox label="4"></el-checkbox>
        </el-checkbox-group>
      </div>

      <div class="section" :style="{width:`${width}px`,height:`${height}px`}">
        <vue-only 
        :lotteries="filteredLotteries"
        :lottery-stats="lotteryStats"
        :width="width"
        >
        </vue-only>
      </div>
The entire code can be seen in the following link.

https://github.com/jotnajoa/studioquestion/tree/main/d3vue

tony19 tony19 · Accepted Answer · 2021-04-05T03:52:47

Set the appear property on <transition-group>:

<transition-group tag="div" class="VueOnly" name="fade" appear>

demo

Vue3 transition-group, enter active animation is not working while leave is working

1 Answers