Hide-on-leave 过渡到仅触发一次

【问题标题】：Hide-on-leave transition to fire only onceHide-on-leave 过渡到仅触发一次
【发布时间】：2021-04-26 16:36:32
【问题描述】：

是否可以将hide-on-leave转换设置为在满足特定条件后仅使用一次？

<v-slide-x-transition hide-on-leave>
    <span v-if="isAdded(this.idUn)">
      Added
      <v-icon> mdi-check </v-icon>
    </span>
  </v-slide-x-transition>

假设条件满足，则不再调用此转换。在下面的示例中，您可以看到即使满足条件，当从启用按钮切换时，您仍然可以看到按钮的转换被应用到禁用按钮。

https://codesandbox.io/s/vuetifyvuex-store-testing-ground-wyl4n?file=/src/components/NumberDisplay.vue

【问题讨论】：

标签： javascript html css vue.js vuetify.js

【解决方案1】：

这比大多数过渡更复杂，因为元素在两种情况下发生变化：

当分页索引发生变化时
按钮状态发生变化时

但是，您不希望在分页更改时进行任何转换，并且仅在按钮状态更改不是因为分页更改时才进行转换。你需要使用两个keys：

按钮上的:key="idUn" 以防止分页转换。此键为每个索引保留整个元素组。
“已添加”<span> 上的 :key="isAdded(idUn)"将在按钮状态更改时导致转换。

将演示中的 <v-btn> 替换为：

<v-btn :disabled="isAdded(idUn)" @click="addToList" :key="idUn" width class="ma-1">
  <v-slide-x-transition hide-on-leave>
    <span v-if="isAdded(idUn)" :key="isAdded(idUn)">Added</span>
    <span v-else>Add to List</span>
  </v-slide-x-transition>
</v-btn>

【讨论】：