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

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

0 голосов
/ 22 января 2020

Посмотрите на форму Basi c на Документация 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 developer enter image description here

1 Ответ

1 голос
/ 22 января 2020

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

enter image description here

Вот определение 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; }

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

...