Skip to content

Commit

Permalink
fix(material/stepper): setting invalid value for visibility (#22254)
Browse files Browse the repository at this point in the history
Setting empty string for visibility is an invalid css property value.
Which leads to error "Failed to execute 'animate' on 'Element' : Partial keyframes are not supported" in old browser.

(cherry picked from commit 6db0fa9)
  • Loading branch information
VinitTomar authored and andrewseguin committed Mar 23, 2021
1 parent 059214e commit 3ead2cd
Showing 1 changed file with 8 additions and 6 deletions.
14 changes: 8 additions & 6 deletions src/material/stepper/stepper-animations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,10 @@ export const matStepperAnimations: {
/** Animation that transitions the step along the X axis in a horizontal stepper. */
horizontalStepTransition: trigger('stepTransition', [
state('previous', style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'})),
// Transition to '', rather than `visible`, because visibility on a child element overrides
// the one from the parent, making this element focusable inside of a `hidden` element.
state('current', style({transform: 'none', visibility: ''})),
// Transition to `inherit`, rather than `visible`,
// because visibility on a child element the one from the parent,
// making this element focusable inside of a `hidden` element.
state('current', style({transform: 'none', visibility: 'inherit'})),
state('next', style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'})),
transition('* => *', animate('500ms cubic-bezier(0.35, 0, 0.25, 1)'))
]),
Expand All @@ -36,9 +37,10 @@ export const matStepperAnimations: {
verticalStepTransition: trigger('stepTransition', [
state('previous', style({height: '0px', visibility: 'hidden'})),
state('next', style({height: '0px', visibility: 'hidden'})),
// Transition to '', rather than `visible`, because visibility on a child element overrides
// the one from the parent, making this element focusable inside of a `hidden` element.
state('current', style({height: '*', visibility: ''})),
// Transition to `inherit`, rather than `visible`,
// because visibility on a child element the one from the parent,
// making this element focusable inside of a `hidden` element.
state('current', style({height: '*', visibility: 'inherit'})),
transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
])
};

0 comments on commit 3ead2cd

Please sign in to comment.