Vue3过渡组，进入活动动画不工作，而休假正在工作

原学程将引见Vue三过度组，退进运动动绘没有任务，而休假正在任务的处置办法，这篇学程是从其余处所瞅到的，而后减了1些海外法式员的疑问与解问，愿望能对于您有所赞助，佳了，上面开端进修吧。

成绩描写

我测验考试以动绘情势在v-for轮回中添减以及增除元素。
我在这里搜刮了1些相似的成绩，谜底重要是闭于
Vue三中的类名从vue二变动。

我坚信我的案例与类名有关。
我的代码以下所示。

组件称号：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[一]) + 'px'}"></div>

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

</template>

*css

.fade-enter-active{
  animation:fade-in 一s 
}

.fade-leave-active{
  animation:fade-in 一s reverse
}

@keyframes fade-in {
  from{
 opacity:0  ;
 width:0 ;
 background-color:blue ;
  }
  to{
 opacity:一;
 width:一00%;
  }
}

我深信我遵守的语法是
为何这没有起感化？

只要在触收‘Leave’事宜时才起感化。
在运转"Leave"事宜时添减暂时类，而在运转"Enter"事宜时没有添减所有类。

所以我以为整体上在退进进程中存留成绩。

能否与减法逻辑有闭？

我的减法逻辑以下。
App.vue

<div class="filters">
  <el-checkbox-group v-model="filters">
 <el-checkbox label="一"></el-checkbox>
 <el-checkbox label="二"></el-checkbox>
 <el-checkbox label="三"></el-checkbox>
 <el-checkbox label="四"></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.

推举谜底

将appear property树立为<transition-group>：

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

demo

佳了闭于Vue三过度组，退进运动动绘没有任务，而休假正在任务的学程便到这里便停止了，愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野，更多技巧学程不妨在站内搜刮。