我有一个包含表单的项目。当后端成功接收到表单后,我们应该用另一个按钮交换按钮,以向用户确认他的请求已通过。
但是当我尝试使用 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)
},