TransitionGroup not firing v-move at array.push

by

Summary

The issue at hand is with Vue 3’s TransitionGroup not firing the v-move event when a new element is added to an array using array.push(). This is causing problems for a toast component that requires new elements to appear at the bottom and older elements to fade upward when a new element is added.

Root Cause

The root cause of this issue is due to the following reasons:

  • Array mutation: When array.push() is used, it only adds a new element to the end of the array without changing the position of the existing elements.
  • TransitionGroup behavior: The v-move event is only triggered when the position of an element changes, which is not the case when a new element is added to the end of the array.

Why This Happens in Real Systems

This issue occurs in real systems because of the way TransitionGroup handles array mutations. When a new element is added to the end of the array, TransitionGroup does not detect any changes in the position of the existing elements, and therefore does not trigger the v-move event. This can cause problems for components that rely on this event to animate the movement of elements.

Real-World Impact

The real-world impact of this issue is:

  • Broken animations: The toast component’s animation does not work as expected, causing a poor user experience.
  • Limited functionality: The component’s functionality is limited due to the inability to animate the movement of elements when a new element is added.

Example or Code

// Example of how to reproduce the issue
import { ref } from 'vue'

const toasts = ref([
  { id: 1, message: 'Toast 1' },
  { id: 2, message: 'Toast 2' },
])

function addToast() {
  toasts.value.push({ id: 3, message: 'Toast 3' })
}

How Senior Engineers Fix It

Senior engineers can fix this issue by using a different approach to add new elements to the array, such as:

  • Using a key function: Provide a key function to TransitionGroup that returns a unique key for each element, allowing TransitionGroup to detect changes in the position of elements.
  • Using a wrapper element: Wrap each element in a separate component, allowing TransitionGroup to detect changes in the position of the wrapper elements.

Why Juniors Miss It

Juniors may miss this issue because:

  • Lack of understanding of TransitionGroup: Juniors may not fully understand how TransitionGroup works and how it detects changes in the position of elements.
  • Insufficient testing: Juniors may not test their components thoroughly, missing the issue until it is reported by users.

Leave a Comment