Hide-on-leave过渡到只开火一次

Question

是否可以将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

Answer 1

这比大多数转换更复杂，因为元素在两种情况下发生变化:

• 当分页索引改变时
• 按钮状态改变时

但是您不希望在分页更改上有任何转换，并且只有在不是由于分页更改时才希望在按钮状态更改上有任何转换。您需要使用两个keys:

• 按钮上的:key="idUn"防止分页过渡。此键保留每个索引的整个元素组。
• A:key="isAdded(idUn)"上的"已添加";<span>，将引起一个过渡时，按钮状态的变化。

将演示中的<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>