Доброго времени суток. Суть вопроса такова, что есть форма на одностраничнике которая всплывает в модальном окне.
Форма создана с использованием библиотеки Vue (так как есть желание ее освоить), Но в силу малого опыта не могу "запилить" одну "фичу", а очень хочу.
К делу :
код компонента формы (частично ибо стыдно показывать, что я там "налапшегонил")
<template>
//create an animation of the appearance - the disappearance of the form
<transition name="fade"
enter-active-class="animated bounceInUp"
leave-active-class="animated bounceOutRight"
>
.... //here is the form code
// пример одного поля
<div class="row">
<div class="input-field " :class="{'wrong-input': isWrongName}">
<i class="material-icons prefix small">child_care</i>
<input class="input" type="text" id="name" name="name" v-model="name" @change="nameValidation">
<span v-if="errorMessages.poorName">{{errorMessages.poorName}}</span>
<label for="name">Ваше имя:</label>
</div>
</div>
....//here too the code
</transition>
</template>
Выше приведен пример одного поля в котором есть span с условием v-if которые появляются при заполнении "errorMessages.emptyName" (ну это понятно)
есть метод этого компонента который отвечает за валидацию данного поля выглядит он так:
nameValidation () {
if(this.name.length < 2){
this.isWrongName = true;
this.errorMessages.poorName = errorMessagesLocale[locale].poorName;
}else{
this.isWrongName = false;
this.errorMessages.poorName = '';
}
}
Все работает, т. е. при несоответствии условию сообщение появляется, и класс ошибки тоже "биндится" к блоку инпута, все становится красным ))), но хотелось бы анимировать данный эффект. Я использую Css библиотеку Animate.css (как понятно из тэга формы), и при появлении и исчезновении самой формы все работает отлично, а вот при появлении сообщений об ошибках не получается, они просто появляются и просто исчезают.
Пробовал "оборачивать" с этими месседжами в теги , но не срабатывает. понятно, что я что-то упускаю, а вот что не могу разобрать. Буду рад вашим советам, спасибо!!
Простой
