Components: [Stepper] Allow animation to be customized

Created on 11 Dec 2017  路  2Comments  路  Source: angular/components

Is it possible to override the transition animation set in Material Stepper?
I would like to set different timing and easing.

The Stepper animation currently is such:
js animations: [ trigger('stepTransition', [ state('previous', style({height: '0px', visibility: 'hidden'})), state('next', style({height: '0px', visibility: 'hidden'})), state('current', style({height: '*', visibility: 'visible'})), transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')) ]) ]
This is from stepper.ts (line 119)

P5 cdstepper feature

Most helpful comment

anyone found a way to customize the transition for the stepper? or at the ver least stop the exiting Step from just disappearing?

All 2 comments

anyone found a way to customize the transition for the stepper? or at the ver least stop the exiting Step from just disappearing?

At least if animation is not customisable, it should be refined. Currently the visible step disappears before animating next step. This is not pretty in my opinion. Of course this is subjective.

It seems to me that it would be clearer for the end-user and also prettier if it was more of a carrousel. Clicking a step just slide from left to right or right to left. Eventually, the same could be done for the vertical stepper. I'm not a big fan of those accordions, they always lag on my machine and this is a Macbook pro.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MurhafSousli picture MurhafSousli  路  3Comments

julianobrasil picture julianobrasil  路  3Comments

michaelb-01 picture michaelb-01  路  3Comments

alanpurple picture alanpurple  路  3Comments

Hiblton picture Hiblton  路  3Comments