Vuelidate - встряхивание неправильного поля ввода

Взгляните на базовую форму в документации Vuelidate. Если правило нарушено (текст слишком короткий), метка становится красной, затем появляется сообщение об ошибке и поле ввода некоторое время трясется. Как это сделать? Я скопировал образец исходного кода, и эффекта тряски нет. Я даже не могу смоделировать это официальной скрипкой: https://jsfiddle.net/so89zmpe/2/

<div class="form-group" :class="{ 'form-group--error': $v.name.$error }">
  <label class="form__label">Name</label>
  <input class="form__input" v-model.trim="$v.name.$model"/>
</div>

Я не могу найти ничего подходящего в документе разработчика Chrome введите описание изображения здесь


vue.js vuelidate
person Leos Literak    schedule 22.01.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Если вы откроете DevTools> вкладку Animations, вы увидите, что имя анимации shakeError применено к .form-group.form-group--error:

введите здесь описание изображения

Вот определение shakeError:

@keyframes shakeError {
  0% {
    transform: translateX(0); }
  15% {
    transform: translateX(0.375rem); }
  30% {
    transform: translateX(-0.375rem); }
  45% {
    transform: translateX(0.375rem); }
  60% {
    transform: translateX(-0.375rem); }
  75% {
    transform: translateX(0.375rem); }
  90% {
    transform: translateX(-0.375rem); }
  100% {
    transform: translateX(0); } }

А потом,

.form-group--alert,
.form-group--error {
  animation-name: shakeError;
  animation-fill-mode: forwards;
  animation-duration: .6s;
  animation-timing-function: ease-in-out; }

Вы можете проверить вкладку «Источники» в https://vuelidate.js.org/#sub-basic-form, чтобы docs.scss файл мог покопаться глубже.

person Sangeeth Sudheer    schedule 22.01.2020
comment
Спасибо, мне удалось: jsfiddle.net/literakl/bhL6aod9/7 - person Leos Literak; 22.01.2020
comment
Это часть библиотеки vuelidate, которую я могу импортировать? Или мне нужно скопировать и вставить весь CSS в мой проект? - person Leos Literak; 22.01.2020
comment
@LeosLiterak Думаю, это нестандартный стиль. Вы можете скопировать приведенный выше CSS, и он должен работать. - person Sangeeth Sudheer; 22.01.2020
comment
@LeosLiterak ???? - person Sangeeth Sudheer; 22.01.2020
comment
правда, в библиотеке есть co CSS - person Leos Literak; 22.01.2020