javascript - Hide-on-leave transition to fire only once

Question

Is it possible to set hide-on-leave transition to be used only once after certain condition is met?

<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>

Lets say if the condition is fulfilled this transition would not be called anymore. In the example below you can see that even though condition is met you can still see transition of the button being applied to the disabled button when switching from enabled one.

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

question from:https://stackoverflow.com/questions/65841291/hide-on-leave-transition-to-fire-only-once

Answer 1

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>