Vue 过渡按钮淡入淡出

问题描述

我有一个包含表单的项目。当后端成功接收到表单后，我们应该将按钮替换为另一个按钮，以向用户确认他的请求已通过。

但是当我尝试使用 Vue 和过渡来执行此操作时，我可以让按钮交换但淡入淡出不起作用。按钮立即交换。

这是模板内按钮的过渡：

<transition name="fade" mode="out-in">
    <button
        v-if="!valid"
        class="my-3 px-4 py-3 rounded-md shadow-sm text-base font-medium text-white-primary bg-red-primary hover:bg-red-secondary"
        @click="checkForm"
    >
        Request Beta Access
    </button>
    <button
        v-if="valid"
        class="my-3 px-4 py-3 rounded-md shadow-sm text-base font-medium text-white-primary bg-green-300 hover:bg-red-secondary"
        @click="checkForm"
    >
        Request Sended
    </button>
</transition>

这是更改我的局部变量 valid 的函数。此时我正在使用超时来模拟将表单发送到后端。当您将表单发送到后端时，第一个 setTimeout 模拟了一个小的延迟。第二次超时是通过更改本地有效变量来显示成功按钮 2 秒：

async sendBetaRequest () {
    setTimeout(() => {
        this.clearForm()
        this.valid = true

        setTimeout(() => {
            this.valid = false
        },2000)
    },1000)
},

解决方法

正如我在评论中所说，您需要自己定义转换，Vue 不会为您提供它们。

最常用的方法是使用CSS classes。

这是一个例子：

new Vue({
  el: '#app',data: {
    valid: false
  },methods: {
    sendBetaRequest() {
      setTimeout(() => {
        this.valid = true

        setTimeout(() => {
          this.valid = false
        },2000)
      },1000)
    },}
})

.fade-enter-active,.fade-leave-active {
  opacity: 1;
  transition: opacity 0.3s;
}

.fade-leave-to,.fade-enter {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <transition name="fade" mode="out-in">
    <button v-if="!valid" @click="sendBetaRequest" :key="1">
        Request Beta Access
    </button>
    <button v-else :key="2">
        Request Sended
    </button>
  </transition>
</div>

您可以使用一些过渡库，但是，如果您是 Vue 的新手，我建议您尽早掌握它，因为它是您需要进一步了解的内容线。

javascript vue-transitions vue.js