Vue3过渡组，进入活动动画不工作而离开工作答案

【问题标题】：Vue3 transition-group, enter active animation is not working while leave is workingVue3过渡组，进入活动动画不工作而离开工作
【发布时间】：2021-07-01 00:01:38
【问题描述】：

我尝试在 v-for 循环中动画添加和删除元素。我在这里搜索了一些类似的问题，主要是关于 vue3 中的类名从 vue2 更改。

我确定我的案例与班级名称无关。我的代码如下。

组件名称：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%;
  }
}

我坚信我正在遵循以下语法为什么这不起作用？

仅在触发 '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

【问题讨论】：

标签： vue.js data-visualization transition

【解决方案1】：

在<transition-group>上设置appear property：

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

demo

【讨论】：