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

Posted 2023-02-16

【中文标题】Vue.js：如何使转换组只触发一次？

【英文标题】：Vue.js: how to make transition-group to trigger only once?

【发布时间】：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 事件。

【参考方案1】：

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

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