Vue.js：如何使转换组只触发一次？答案

【问题标题】：Vue.js: how to make transition-group to trigger only once?Vue.js：如何使转换组只触发一次？
【发布时间】：2021-08-29 02:59:00
【问题描述】：

我在下面有这个 Vue transition-group。它可以正常工作，但问题是，当循环中的任何元素更新（hash 更改，用于键）时，过渡组会触发该更新元素的动画（每次更新时）。

当元素被添加到items 数组时，我只需要它为元素设置一次动画（元素使用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 提到它在“从 DOM 插入、更新或删除项目时”运行，但没有说明如何将其限制为仅 inserted 和 removed 事件。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

我发现了问题。它重新触发转换，因为用于键的属性item.hash 发生了变化。我必须使用一些不会改变的静态键属性

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

【讨论】：