我试着在v-for循环中动画化元素的添加和删除。我在这里搜索了一些类似的问题，主要是关于vue 3中类名从vue 2更改的问题。
我确信我的案例与类名无关。我的代码如下。

组件名称：仅版本

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

我坚信我遵循的是为什么这不起作用的语法？
只有在leave事件触发时才起作用，leave事件运行时添加临时类，enter事件运行时不添加类。
所以我认为一般来说进入过程有问题。
它和加法逻辑有什么关系吗？
我的加法逻辑如下。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