This is more complex than most transitions because the element changes in two scenarios:
- When the pagination index changes
- When the state of the button changes
Yet you don't want any transition on the pagination change, and only on the button state change if it's not because of a pagination change. You need to use two keys
:
- A
:key="idUn"
on the button to prevent the pagination transition. This key preserves the whole element group for each index.
- A
:key="isAdded(idUn)"
on the "Added" <span>
that will cause a transition when the button state changes.
Replace the <v-btn>
in your demo with this:
<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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…