दस्तावेज़ों का सत्यापन करें पर मूल फ़ॉर्म पर एक नज़र डालें। यदि नियम टूटा हुआ है (पाठ बहुत छोटा है), लेबल लाल है, तो त्रुटि संदेश प्रकट होता है और इनपुट फ़ील्ड थोड़ी देर के लिए हिल जाता है। यह कैसे किया जाता है? मैंने स्रोत कोड नमूना की प्रतिलिपि बनाई है और झटकों का प्रभाव नहीं है। मैं इसे एक आधिकारिक पहेली के साथ अनुकरण भी नहीं कर सकता: 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>

मुझे क्रोम डेवलपर में कुछ भी प्रासंगिक नहीं मिल रहा है यहां छवि विवरण दर्ज करें

1
Leos Literak 22 जिंदा 2020, 11:46

1 उत्तर

सबसे बढ़िया उत्तर

यदि आप DevTools > एनिमेशन टैब खोलते हैं, तो आप देख सकते हैं कि shakeError का एक एनिमेशन नाम .form-group.form-group--error पर लागू है:

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; }

आप https://vuelidate.js.org/#sub-basic के स्रोत टैब देख सकते हैं -form एक docs.scss फ़ाइल को गहराई से खोदने के लिए।

2
Sangeeth Sudheer 22 जिंदा 2020, 11:56