在转换组内仅触发一次事件

Posted 2023-02-16

【中文标题】在转换组内仅触发一次事件

【英文标题】：Trigger event only once within transition-group

【发布时间】：2019-08-01 20:21:11

【问题描述】：

我一直在为 Vue 中的转换而苦苦挣扎。据我所知，我必须使用<transition-group/> 为元素列表设置动画。问题是我想在动画完成后有一个滚动动画。我可以使用一些转换事件，@enter、@leave、@after-leave。

但是当我的列表中有十个元素时，所选事件会被调用十次（这是有道理的）。当<transition-group/> 中的所有元素都完成过渡时，是否可以触发事件？

示例代码：

<transition-group name="slide" @after-enter="afterEnter">
  <div
    class="appointment-list"
    v-for="(list, key) in appointments_"
    :id="`appointment_$generateKey(key)`"
    :key="generateKey(key)"
    :class="getClassObject(key)"
  >
    <div class="appointment-list__time">
       formatDate(key) 
    </div>
    <ul class="appointment-list__items">
      <li v-for="(appointment) in list" v-bind:key="appointment.id">
        <AppointmentItem v-bind="appointment" />
      </li>
    </ul>
  </div>
</transition-group>

我想在所有项目完成过渡后触发事件的原因：

我有另一个组件可以更改 appointments_ 数据（使用 Vuex 状态管理器）。动画完成后，我想调用一个将所选元素滚动到屏幕中的函数。我有一个有点糟糕的解决方案，那就是setTimeOut() 方法：

setSelectedCalendarDate(event, date) 
  // #ashamed
  const delay = moment(date).isSame(this.selectedDate_, 'month') ? 0 : 1000;
  setTimeout(() => 
    VueScrollTo.scrollTo(`#appointment_$date.format('YYYYMMDD')`, 500,  offset: -60 );
  , delay);

  this.$store.dispatch('appointments/setAppointmentsByDate', date);
,

我希望有人知道我的问题的解决方案。非常感谢！

【参考方案1】：

我找到了解决问题的方法。每次触发@after-enter 事件时，我都会检查索引是否与appointment_ 列表的大小相同。当结果为真时，就该滚动了！

跟踪当前索引：

<transition-group name="slide" @after-enter="afterEnter">
  <div
    v-for="(list, key, index) in appointments_"
    v-bind:key="key"
    v-bind:data-index="index"
  >
    <!-- Content -->
  </div>
</transition-group>

将组件滚动到视图中的代码：

methods: 
  afterEnter(element) 
    if (this.appointments_.length === Number(element.dataset.index) + 1) 
      VueScrollTo.scrollTo(`#appointment_$this.selectedDate_`, 500,  offset: -60 );
    
  ,
,