Vue过渡按钮淡入淡出

Question

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

但是当我尝试使用 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>

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

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

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

Answer 1

正如我在评论中所说，您需要自己定义转换，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 新手，我建议您尽早掌握这一点，而不是稍后，因为您需要进一步了解行。