diff --git a/src/material/form-field/_form-field-subscript.scss b/src/material/form-field/_form-field-subscript.scss index 2f17b7950980..2e3da86d9899 100644 --- a/src/material/form-field/_form-field-subscript.scss +++ b/src/material/form-field/_form-field-subscript.scss @@ -3,6 +3,18 @@ @use '../core/tokens/token-utils'; @mixin private-form-field-subscript() { + @keyframes _mat-form-field-subscript-animation { + from { + opacity: 0; + transform: translateY(-5px); + } + + to { + opacity: 1; + transform: translateY(0); + } + } + // Wrapper for the hints and error messages. .mat-mdc-form-field-subscript-wrapper { box-sizing: border-box; @@ -17,6 +29,12 @@ left: 0; right: 0; padding: 0 16px; + opacity: 1; + transform: translateY(0); + + // Note: animation-duration gets set when animations are enabled. + // This allows us to skip the animation on init. + animation: _mat-form-field-subscript-animation 0ms cubic-bezier(0.55, 0, 0.55, 0.2); } .mat-mdc-form-field-subscript-dynamic-size { diff --git a/src/material/form-field/_mdc-text-field-structure.scss b/src/material/form-field/_mdc-text-field-structure.scss index d28b847924d2..3f00d56b11ab 100644 --- a/src/material/form-field/_mdc-text-field-structure.scss +++ b/src/material/form-field/_mdc-text-field-structure.scss @@ -611,8 +611,11 @@ } .mdc-line-ripple::after { - transition: - transform 180ms $timing-curve, - opacity 180ms $timing-curve; + transition: transform 180ms $timing-curve, opacity 180ms $timing-curve; + } + + .mat-mdc-form-field-hint-wrapper, + .mat-mdc-form-field-error-wrapper { + animation-duration: 300ms; } } diff --git a/src/material/form-field/form-field-animations.ts b/src/material/form-field/form-field-animations.ts index a28b6223d2fb..4f0d033f902a 100644 --- a/src/material/form-field/form-field-animations.ts +++ b/src/material/form-field/form-field-animations.ts @@ -17,6 +17,8 @@ import { /** * Animations used by the MatFormField. * @docs-private + * @deprecated No longer used, will be removed. + * @breaking-change 21.0.0 */ export const matFormFieldAnimations: { readonly transitionMessages: AnimationTriggerMetadata; diff --git a/src/material/form-field/form-field.html b/src/material/form-field/form-field.html index 0c62f7ca809f..f1a46075b46b 100644 --- a/src/material/form-field/form-field.html +++ b/src/material/form-field/form-field.html @@ -101,16 +101,13 @@ > @switch (_getDisplayedMessages()) { @case ('error') { -