CODEWITHSUNDEEP
vue.jsvuejs2
AlekseyHoffman
AlekseyHoffman

Reputation: 2694

Vue.js: how to make transition-group to trigger only once?

I have this Vue transition-group below. It works properly, but the problem is, when any element in the loop updates (hash changes, which is used for key), the transition group triggers the animation for that updated element (every time it updates).

I need it to only animate the elements once, when they are added to the items array (the elements are added with items.unshift(newItem))

<transition name="notification-transition">
  <custom-component
    v-for="item in items"
    :key="'item-' + item.hash"
  ></custom-component>
</transition>

.notification-transition-enter-active {
  transition: all 0.5s ease;
}

.notification-transition-leave-active {
  transition: all 0s ease;
}

.notification-transition-enter,
.notification-transition-leave-to {
  opacity: 0;
  transform: translateX(256px);
}

Vue docs mention that it runs "when items are inserted, updated, or removed from the DOM" but doesn't say anything about how to limit it to just the inserted and removed event.

Upvotes: 0

Views: 840

Answers (1)

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

I found the problem. It re-triggers transition because the property item.hash, which is used for key, changes. I have to use some static key property, that doesn't change

<transition name="notification-transition">
  <custom-component
    v-for="item in items"
    :key="'item-' + item.staticHash"
  ></custom-component>
</transition>

Upvotes: 1

Related Questions