css - Vue/Vuetify 过渡只有一种方式

Question

是否可以将过渡设置为仅触发 v-btn 的一种方式？
我创建了带有根据条件而变化的文本的按钮，并使用过渡来平滑地改变它。但是，如果我更改 View 和条件更改转换 reverses它看起来有问题。我不想要这种行为，只想以一种方式触发转换。

 <v-btn
        class="ma-1"
        @click="addToList"
        width
        :disabled="isAdded"
        >
          <span v-if="!isAdded">  
                Add to List
          </span> 
          <v-slide-x-transition>
            <span v-if="isAdded">
              Added
              <v-icon>
                mdi-check
              </v-icon>
            </span>
        </v-slide-x-transition>
</v-btn>

这是如何工作的示例:
https://codepen.io/pokepim/pen/VwKNzxj?editors=101
在轮播中，当您在幻灯片之间切换时，您可以看到按钮向后反转并扩展了宽度，通常这看起来有些小问题。在这种情况下，是否可以仅在单击按钮时保持过渡(因此没有从禁用按钮到事件按钮的向后过渡)？
编辑:
我尝试了丹的回答，虽然它在轮播情况下工作正常，但它仍然不能解决一般的毛刺过渡，这里是使用方法而不是计算属性的相同行为的示例:
https://codesandbox.io/s/vuetifyvuex-store-testing-ground-wyl4n?file=/src/App.vue

Answer 1

只有一个 isAdded条件用于所有幻灯片。当该条件为 false在下一张幻灯片上，它在动画完成之前就设置好了，看起来很糟糕。
使用方法而不是计算 isAdded所以每张幻灯片都可以保持自己的按钮状态:

methods: {
  addToList() {
    this.btnlist.push(this.model);
  },
  isAdded(i) {
    return this.btnlist.includes(i);
  }
}

并更改所有 isAdded在模板中 isAdded(i) .
这是更新的 demo

要编辑，请尝试 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>