Vue/Vuetify 转换只有一种方式答案

【问题标题】：Vue/Vuetify transition only one wayVue/Vuetify 转换只有一种方式
【发布时间】：2021-04-25 20:13:03
【问题描述】：

是否可以将转换设置为仅触发 v-btn 的一种方式？我创建了带有根据条件更改的文本的按钮，并使用过渡来平滑地更改它。但是，如果我更改视图并且条件更改转换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

在轮播中，当您在幻灯片之间切换时，您可以看到按钮反转并扩展宽度，通常这看起来有些小故障。在这种情况下是否可以仅在单击按钮时保持过渡（因此不会从禁用按钮向后过渡到活动按钮）？

编辑：我尝试了 Dan 的回答，虽然它在轮播案例中运行良好，但它仍然不能解决一般的故障转换，这里是使用方法而不是计算属性的相同行为的示例： https://codesandbox.io/s/vuetifyvuex-store-testing-ground-wyl4n?file=/src/App.vue

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案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>

【讨论】：