Vuelidate - 摇晃不正确的输入字段

Question

查看Vuelidate documentation 的基本表单。如果规则被破坏（文本太短），标签为红色，然后出现错误消息，输入字段会抖动一会儿。这是怎么做到的？我已经复制了源代码示例，并且没有晃动效果。我什至无法用官方小提琴来模拟它：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 开发人员中找不到任何相关内容

Answer 1

如果你打开 DevTools > Animations 选项卡，你可以看到.form-group.form-group--error 上应用了一个动画名称shakeError：

这是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 的 Sources 选项卡以获取 docs.scss 文件以深入了解。