简单的动态数据滚动动画，transition-group 使用；-enter-form不生效？监听过度事件

上才艺

描述

组件中，{name}-enter-form定义的类名不生效，在官网是没问题的，但是在我使用的项目上，不管怎么定义都没有效果。所以我猜测，渲染的时候根本没有给上这个类名！！！

（{name}为组件定义的name，下面name固定为list）

监听过度事件

可以用vue过度钩子来检查各个阶段的过度

<transition-group 
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  name="list"
>
  <!-- 你的列表项 -->
</transition-group>

export default {
  methods: {
    beforeEnter(el) {
      console.log('Before Enter:', el);
      if (!el.classList.contains('list-enter-from')) {
        console.error('list-enter-from class not added');
      }
    },
    enter(el) {
      console.log('Entering:', el);
    },
    afterEnter(el) {
      console.log('After Enter:', el);
    }
  }
}

结果

在before-enter回调中明显看到，没有给设置list-enter-form，而是设置了list-enter；

相当于帮我更改了类名，但是项目中并没有对组件的修改，不知道是不是版本兼容性问题，我的vue版本"vue": "2.6.12"

组件使用点这里。transition-group。也贴在下面

CSS 过渡 class​

一共有 6 个应用于进入与离开过渡效果的 CSS class。

1. v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
2. v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
3. v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
4. v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
5. v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
6. v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

v-enter-active 和 v-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力。

简单的案例

<template>
  <transition-group name="list">
    <div v-for="item in items" :key="item.id" class="list-item">
      {{ item.text }}
    </div>
  </transition-group>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ]
    }
  }
}
</script>

<style scoped>
.list-item {
  transition: all 0.5s ease;
}

.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
</style>