Кнопки перехода 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)
},
У меня нет классов перехода CSS. Я нашел этот пример в документации vue vuejs.org/v2/guide/transitions.html#Transition-Modes. Я думал, что добавление имени и режима к переходу сделает переход.
Вам нужно где-то определить переход. Самый распространенный способ — использование классов CSS , но вы также можете использовать хуки JavaScript.
У меня не будет того же css, что и у кнопки в примере с документами vue. Я не знаю, как это сделать в css.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Как я сказал в своем комментарии, вам нужно определить переход самостоятельно, Vue не предоставляет их вам.
Самый распространенный метод — использование CSS-классов.
Вот пример:
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, я бы порекомендовал разобраться с этим раньше, чем позже, так как это то, что вам нужно будет знать в дальнейшем.
Извините, я новичок в переходах и Vue. Но где мне точно определить сценарий?
Какой скрипт вы имеете в виду?
<script src = "cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></…>
Хорошая штука, без проблем. Этот скрипт — просто CDN-версия Vue для работы фрагмента SO.
Можете ли вы включить свои классы перехода CSS?