Vuelidate

Question

在 Vuelidate documentation. If the rule is broken (text is too short), the label is red, then eror message appears and the input field shakes for a while. How is this done? I have copied the source code sample and the shaking effect is not there. I cannot even simulate it with an official fiddle: 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 选项卡，您可以看到 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 文件以进行更深入的挖掘。

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

Vuelidate - shaking the incorrect input field

vue.js