Vue3过渡组，进入活动动画不工作，而休假正在工作 [英] Vue3 transition-group, enter active animation is not working while leave is working

问题描述

我尝试以动画形式在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

推荐答案

将appear property设置为<transition-group>：

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

demo

这篇关于Vue3过渡组，进入活动动画不工作，而休假正在工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！