Question

我一直在为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);
},

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

Answer 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 });
    }
  },
},

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

1 个答案: