Error Transition for form fields

Description

It would be nice to have an easy to enable/add transition for how errors will be displayed example

 <Transition name="error-slide" mode="out-in">
    <div v-if="error" class="error-message">
        {{ error }}
    </div>
  </Transition>

.error-slide-enter-active,
.error-slide-leave-active {
  transition:
    opacity 0.25s ease,
    transform 0.2s ease-out,
    max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 100px;
  overflow: hidden;
  transform-origin: top;
}
.error-slide-enter-from {
  opacity: 0;
  transform: translateY(-5px);
  max-height: 0;
}
.error-slide-leave-to {
  opacity: 0;
  transform: translateY(-5px);
  max-height: 0;
}

Additional context

No response

The issue does not name a file or test; start by locating the form-field components that render validation errors. Compare their current error rendering with the proposed transition and CSS, then verify that enabling the feature produces consistent enter and leave animations without breaking existing fields.