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

Question

查看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 开发人员中找不到任何相关内容

Answer 1

如果你打开 DevTools > Animations 选项卡，你可以看到有一个动画名称 apply shakeErroron .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的 Sources 选项卡以获取docs.scss文件以深入挖掘。